Fix Imagery for VERVE #266 (#3507)

* Fairly extensive refactoring to fix layout in Safari for VERVE #266

- VERY WIP at this time!
- Many instances of `height: 100%` converted or amended to include
`flex: 1 1 auto`;
- Some high-use containers like `c-so-view__object-view` converted to use
flex layout;
- Views fixed generally for sub-object view, and specifically for
Conditionals, Folder grid view and Imagery;
- Imagery background image holder converted to use absolute positioning;
- TODO: Notebook has a problem where the side nav pane isn't overlaying
in Safari - it's a JS thing, c-drawer--push isn't be replaced with
c-drawer--overlays as it should;

* CSS and markup refactoring to support addition of 'suspect' telemetry

- Remove commented code;

src/plugins/condition/components/conditionals.scss

@@ -50,6 +50,7 @@
 .c-cs {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
     height: 100%;
     overflow: hidden;
 

src/plugins/folderView/components/grid-view.scss

@@ -11,6 +11,8 @@
 
     body.desktop & {
         flex-flow: row wrap;
+        align-content: flex-start;
+
         &__item {
             height: $gridItemDesk;
             width: $gridItemDesk;

src/plugins/imagery/components/imagery-view-layout.scss

@@ -1,8 +1,8 @@
 .c-imagery {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
     overflow: hidden;
-    height: 100%;
 
     &:focus {
         outline: none;
@@ -19,14 +19,10 @@
     }
 
     &__main-image {
-        &__bg,
-        &__image {
-            height: 100%;
-        }
-
         &__bg {
             background-color: $colorPlotBg;
             border: 1px solid transparent;
+            flex: 1 1 auto;
 
             &.unnsynced{
                 @include sUnsynced();
@@ -34,6 +30,7 @@
         }
 
         &__image {
+            @include abs(); // Safari fix
             background-position: center;
             background-repeat: no-repeat;
             background-size: contain;

src/styles/notebook.scss

@@ -25,6 +25,7 @@
     $headerFontSize: 1.3em;
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
     overflow: hidden;
     height: 100%;
 

src/ui/components/object-frame.scss

@@ -71,8 +71,8 @@
     }
 
     &__object-view {
+        display: flex;
         flex: 1 1 auto;
-        height: 0; // Chrome 73 overflow bug fix
         overflow: auto;
 
         .u-fills-container {
@@ -84,6 +84,6 @@
 
 .l-angular-ov-wrapper {
     // This element is the recipient for object styling; cannot be display: contents
-    height: 100%;
+    flex: 1 1 auto;
     overflow: hidden;
 }

src/ui/layout/layout.scss

@@ -228,8 +228,9 @@
     /******************************* MAIN AREA */
     &__main-container {
         // Wrapper for main views
+        display: flex;
         flex: 1 1 auto !important;
-        height: 0; // Chrome 73 overflow bug fix
+        height: 100%; // Chrome 73 overflow bug fix
         overflow: auto;
     }
 
@@ -338,7 +339,6 @@
 
     &__start {
         flex: 1 1 auto;
-        //margin-right: $interiorMargin;
         min-width: 0; // Forces interior to compress when pushed on
 
         [class*='button'] {
@@ -357,11 +357,6 @@
 
     &__nav-to-parent-button {
         // This is an icon-button
-        //$p: $interiorMargin;
-        //margin-right: $interiorMargin;
-        //padding-left: $p;
-        //padding-right: $p;
-
         .is-editing & {
             display: none;
         }