Fixes for Inspector Plot properties, and more

- Fixed overflow problem when Inspector collapsed;
- Temp legacy styling for Plot inspection, series options, etc.
- Factored out non-useful gridTwoColumn mixin;
- Brought back legacy tree.scss file in legacy-styles.scss;

src/styles-new/_mixins.scss

@@ -115,33 +115,14 @@
     top: $m; right: $m; bottom: $m; left: $m;
 }
 
-@mixin gridTwoColumn() {
-    display: grid;
-    grid-row-gap: 0;
-    grid-template-columns: 1fr 2fr;
-    align-items: start;
-
-    [class*="header"] {
-        border-radius: $smallCr;
-        background-color: $colorInspectorSectionHeaderBg;
-        color: $colorInspectorSectionHeaderFg;
-        margin: 0 0 $interiorMarginSm 0;
-        padding: $interiorMarginSm $interiorMargin;
-
-        &:not(:first-child) {
-            // Allow multiple headers within a component
-            margin-top: $interiorMarginLg;
-        }
-    }
-
-    [class*="span-all"],
-    [class*="header"] {
-        @include gridTwoColumnSpanCols();
-    }
-}
-
-@mixin gridTwoColumnSpanCols() {
-    grid-column: 1 / 3;
+@mixin propertiesHeader() {
+    border-radius: $smallCr;
+    background-color: $colorInspectorSectionHeaderBg;
+    color: $colorInspectorSectionHeaderFg;
+    font-weight: normal;
+    margin: 0 0 $interiorMarginSm 0;
+    padding: $interiorMarginSm $interiorMargin;
+    text-transform: uppercase;
 }
 
 @mixin modalFullScreen() {

src/styles-new/legacy-styles.scss

@@ -46,7 +46,7 @@
 //@import "../styles/search/search";
 //@import "../styles/mobile/search/search";
 @import "../styles/overlay/overlay";
-//@import "../styles/tree/tree";
+@import "../styles/tree/tree"; // TEMP - NEED FOR TREE IN INSPECTOR
 @import "../styles/object-label";
 //@import "../styles/mobile/tree";
 @import "../styles/user-environ/frame";

src/ui/components/controls/pane.vue

@@ -85,6 +85,7 @@
                 transition: opacity 150ms ease;
                 opacity: 0;
                 pointer-events: none;
+                overflow: hidden;
 
                 > * {
                     min-width: 0 !important;

src/ui/components/inspector/Inspector.vue

@@ -18,8 +18,6 @@
     @import "~styles/sass-base";
 
     .c-inspector {
-        min-width: 150px;
-
         > [class*="__"] {
             min-height: 50px;
 
@@ -52,7 +50,7 @@
         }
 
         /************************************************************** LEGACY */
-        // TODO: refactor when markup can be converted
+        // TODO: refactor when legacy properties markup can be converted
         .inspector-location {
             display: inline-block;
 
@@ -93,10 +91,45 @@
                 width: 4px;
             }
         }
+
+        .l-inspector-part {
+            display: contents;
+        }
+
+        h2 {
+            @include propertiesHeader();
+            font-size: 0.65rem;
+            grid-column: 1 / 3;
+        }
+
+        .tree .grid-properties {
+            margin-left: $treeItemIndent + $interiorMarginLg;
+        }
     }
 
     .c-properties {
-        @include gridTwoColumn();
+        display: grid;
+        grid-row-gap: 0;
+        grid-template-columns: 1fr 2fr;
+        align-items: start;
+        min-width: 150px;
+
+        [class*="header"] {
+            @include propertiesHeader();
+
+            &:not(:first-child) {
+                // Allow multiple headers within a component
+                margin-top: $interiorMarginLg;
+            }
+        }
+
+        [class*="span-all"],
+        [class*="header"] {
+            grid-column: 1 / 3;
+        }
+
+
+
 
         + .c-properties {
             // Margin between components
@@ -139,7 +172,7 @@
             word-break: break-all;
             &:first-child {
                 // If there is no preceding .label element, make value span columns
-                @include gridTwoColumnSpanCols();
+                grid-column: 1 / 3;
             }
         }
     }

src/ui/components/layout/Layout.vue

@@ -63,6 +63,7 @@
         top: 0; right: 0; bottom: 0; left: 0;
         display: flex;
         flex-flow: column nowrap;
+        overflow: hidden;
 
         &__status {
             background: $colorBodyFg;