From 59534a310cae655b29ec605b42cacff588f44c9c Mon Sep 17 00:00:00 2001
From: Stephanie Roy <stephanie@iterative.ai>
Date: Fri, 10 Mar 2023 14:32:00 -0500
Subject: [PATCH] Make the plot sizing sliders sticky

---
 webview/src/plots/components/PlotsContainer.tsx | 2 ++
 webview/src/plots/components/styles.module.scss | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
index 4af70c8553..059b1c963a 100644
--- a/webview/src/plots/components/PlotsContainer.tsx
+++ b/webview/src/plots/components/PlotsContainer.tsx
@@ -112,6 +112,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
   const maxNbPlotsPerRow = useSelector(
     (state: PlotsState) => state.webview.maxNbPlotsPerRow
   )
+  const ribbonHeight = useSelector((state: PlotsState) => state.ribbon.height)
 
   useEffect(() => {
     window.dispatchEvent(new Event('resize'))
@@ -207,6 +208,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
         {changeNbItemsPerRow && hasItems && maxNbPlotsPerRow > 1 && (
           <div
             className={styles.nbItemsPerRowSlider}
+            style={{ top: ribbonHeight - 4 }}
             data-testid="nb-items-per-row-slider"
           >
             <MinMaxSlider
diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
index a80d38c2a0..b7dd237e7d 100644
--- a/webview/src/plots/components/styles.module.scss
+++ b/webview/src/plots/components/styles.module.scss
@@ -289,9 +289,15 @@ $gap: 20px;
 }
 
 .nbItemsPerRowSlider {
+  position: sticky;
+  right: 0;
+  top: 0;
+  width: 100%;
   display: flex;
   justify-content: end;
-  margin: 20px;
+  padding: 20px;
+  background-color: $bg-color;
+  z-index: 3;
 }
 
 :global(.has-actions) {