Fix #3981 (#4302)

* Fix #3981
- Mods to markup and CSS for better approach to overflowing and min-heights;
- WIP!

* Fix #3981
- Refinements to min-height approach;
- CSS cleanups;

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>

src/plugins/plot/stackedPlot/StackedPlot.vue

@@ -52,17 +52,19 @@
         >
         </button>
     </div>
-    <stacked-plot-item v-for="object in compositionObjects"
+    <div class="l-view-section">
-                       :key="object.id"
+        <stacked-plot-item v-for="object in compositionObjects"
-                       class="c-plot--stacked-container"
+                           :key="object.id"
-                       :object="object"
+                           class="c-plot--stacked-container"
-                       :options="options"
+                           :object="object"
-                       :grid-lines="gridLines"
+                           :options="options"
-                       :cursor-guide="cursorGuide"
+                           :grid-lines="gridLines"
-                       :plot-tick-width="maxTickWidth"
+                           :cursor-guide="cursorGuide"
-                       @plotTickWidth="onTickWidthChange"
+                           :plot-tick-width="maxTickWidth"
-                       @loadingUpdated="loadingUpdated"
+                           @plotTickWidth="onTickWidthChange"
-    />
+                           @loadingUpdated="loadingUpdated"
+        />
+    </div>
 </div>
 </template>
 

src/styles/_legacy-plots.scss

@@ -46,9 +46,6 @@ mct-plot {
 
 .c-plot,
 .gl-plot {
-    overflow: hidden;
-    min-height: 100px;
-
         .s-status-taking-snapshot & {
         .c-control-bar {
             display: none;
@@ -67,16 +64,17 @@ mct-plot {
 
 .c-plot {
     @include abs($mainViewPad);
-
     display: flex;
     flex-direction: column;
+    overflow: hidden;
+    min-height: $plotMinH;
 
     .c-control-bar {
         flex: 0 0 auto;
         margin-bottom: $interiorMargin;
     }
 
-    .l-view-section, .c-plot--stacked-container {
+    .l-view-section {
         display: flex;
         flex: 1 1 auto;
         flex-direction: column;
@@ -84,7 +82,18 @@ mct-plot {
         overflow-x: hidden;
     }
 
+    .c-plot--stacked-container {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: column;
+        min-height: $plotMinH;
+        overflow: hidden;
+    }
+;
+
     &--stacked {
+        min-height: auto !important;
+
         .child-frame {
             .has-control-bar {
                 .c-control-bar {
@@ -124,7 +133,7 @@ mct-plot {
     .plot-wrapper-axis-and-display-area {
         position: relative;
         flex: 1 1 auto;
-        min-height: $plotMinH;
+        //min-height: $plotMinH;
     }
 
     .gl-plot-wrapper-display-area-and-x-axis {
@@ -465,6 +474,7 @@ mct-plot {
 .gl-plot-legend,
 .c-plot-legend {
     overflow: hidden;
+    flex: 0 0 auto; // Prevents clipping for all legend placements (top, bottom, etc.)
 
     &__wrapper {
         // Holds view-control and both collapsed and expanded legends