From 5df7971438acb9e8b933edda2aed432b1b8bb27d Mon Sep 17 00:00:00 2001
From: "Rukmini Bose (Ruki)" <48999852+rukmini-bose@users.noreply.github.com>
Date: Wed, 17 May 2023 13:32:05 -0500
Subject: [PATCH] [Plots] Fix wrapping of Y Axis when height is small  (#6264)

* New branch to fix y-axis icons

* test: fix locator

---------

Co-authored-by: Jesse Mazzella <jesse.d.mazzella@nasa.gov>
---
 .../plugins/plot/overlayPlot.e2e.spec.js         |  2 +-
 src/plugins/plot/axis/YAxis.vue                  | 16 +++++++++-------
 src/styles/_legacy-plots.scss                    |  8 ++++++--
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
index 818473ae15..1aa1b848f8 100644
--- a/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
+++ b/e2e/tests/functional/plugins/plot/overlayPlot.e2e.spec.js
@@ -53,7 +53,7 @@ test.describe('Overlay Plot', () => {
         await page.locator('.c-click-swatch--menu').click();
         await page.locator('.c-palette__item[style="background: rgb(255, 166, 61);"]').click();
         // gets color for swatch located in legend
-        const seriesColorSwatch = page.locator('.gl-plot-label > .plot-series-color-swatch');
+        const seriesColorSwatch = page.locator('.gl-plot-y-label-swatch-container > .plot-series-color-swatch');
         await expect(seriesColorSwatch).toHaveCSS('background-color', 'rgb(255, 166, 61)');
     });
 
diff --git a/src/plugins/plot/axis/YAxis.vue b/src/plugins/plot/axis/YAxis.vue
index 63cd096cb9..bb1304e57a 100644
--- a/src/plugins/plot/axis/YAxis.vue
+++ b/src/plugins/plot/axis/YAxis.vue
@@ -28,13 +28,15 @@
     <div
         class="gl-plot-label gl-plot-y-label"
     >
-        <span
-            v-for="(colorAsHexString, index) in seriesColors"
-            :key="`${colorAsHexString}-${index}`"
-            class="plot-series-color-swatch"
-            :style="{ 'background-color': colorAsHexString }"
-        >
-        </span>
+        <div class="gl-plot-y-label-swatch-container">
+            <span
+                v-for="(colorAsHexString, index) in seriesColors"
+                :key="`${colorAsHexString}-${index}`"
+                class="plot-series-color-swatch"
+                :style="{ 'background-color': colorAsHexString }"
+            >
+            </span>
+        </div>
         <span
             :class="{'icon-gear-after': (yKeyOptions.length > 1 && singleSeries)}"
         >{{ canShowYAxisLabel ? yAxisLabel : `Y Axis ${id}` }}</span>
diff --git a/src/styles/_legacy-plots.scss b/src/styles/_legacy-plots.scss
index cbd491f54d..2ae2ded851 100644
--- a/src/styles/_legacy-plots.scss
+++ b/src/styles/_legacy-plots.scss
@@ -251,7 +251,7 @@ mct-plot {
         }
 
         &.gl-plot-y-label {
-            display: block;
+            display: flex;
             left: 0; right: auto; bottom: 0;
             text-orientation: mixed;
             writing-mode: vertical-lr;
@@ -275,7 +275,11 @@ mct-plot {
             }
         }
     }
-
+.gl-plot-y-label-swatch-container{
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+}
     .plot-yaxis-right {
         &.gl-plot-y { margin-left: 100%; }