Code trimming / cleanup

- pane tweaks;

src/ui/components/controls/pane.vue

@@ -5,6 +5,7 @@
             'l-pane--horizontal-handle-after': type === 'horizontal' && handle === 'after',
             'l-pane--vertical-handle-before': type === 'vertical' && handle === 'before',
             'l-pane--vertical-handle-after': type === 'vertical' && handle === 'after',
+            'l-pane--collapsable' : collapsable,
             'l-pane--collapsed': collapsed,
             'l-pane--reacts': !handle,
             'l-pane--resizing': resizing === true
@@ -13,7 +14,7 @@
              class="l-pane__handle"
              @mousedown="start">
         </div>
-        <a v-if="collapsable"
+        <a v-if="label"
            class="l-pane__collapse-button"
            @click="toggleCollapse">
             <span class="l-pane__label">{{ label }}</span>
@@ -42,6 +43,10 @@
         > .l-pane  {
             flex-flow: column nowrap;
         }
+
+        &--vertical {
+            height: 100%;
+        }
     }
 
     .l-pane {
@@ -59,7 +64,6 @@
         }
 
         &__collapse-button {
-            // Mobile-first
             position: absolute;
             display: flex;
             align-items: center;

src/ui/components/layout/MctInspector.vue

@@ -6,16 +6,9 @@
         </pane>
         <pane class="l-pane c-inspector__elements"
               handle="before"
-              label="foo"
-              collapsable>
+              label="Elements">
             <div ref="elements">c-inspector__elements 1</div>
         </pane>
-        <pane class="l-pane c-inspector__elements"
-              handle="before"
-              label="bar"
-              collapsable>
-            <div ref="elements">c-inspector__elements 2</div>
-        </pane>
     </multipane>
 </template>
 
@@ -34,10 +27,6 @@
     }
 
     .c-inspector {
-        display: flex;
-        flex-flow: column nowrap;
-        align-items: stretch;
-        height: 100%;
         min-width: 150px;
 
         > [class*="__"] {
@@ -48,23 +37,22 @@
             }
 
             > .l-pane__contents > * {
-                margin-right: $interiorMarginSm; // Provide margin against scrollbar
+                // Provide margin against scrollbar
+                // TODO: move this into pane.vue
+                margin-right: $interiorMarginSm;
             }
         }
 
-        &__properties {
-
-        }
-
         &__elements {
             height: 200px;
         }
 
         .l-inspector-part {
-            display: contents;
+            display: contents; // Legacy
         }
 
         h2 {
+            // Legacy, somewhat
             @include grid-two-column-span-cols;
             border-radius: $smallCr;
             background-color: $colorInspectorSectionHeaderBg;
@@ -200,8 +188,6 @@
             }
         }
     }
-
-
 </style>
 
 <script>