From 1efc0653d4c39b9ffd39ac653ecf67f189af0748 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Fri, 11 Apr 2025 13:32:34 -0600
Subject: [PATCH] scroll more reliable

---
 .../MetricStylingApp/MetricStylingApp.tsx     |  2 +-
 .../SelectAxisAvailableItemsList.tsx          | 32 ++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
index f519e976c..d01e7c658 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
@@ -89,7 +89,7 @@ export const MetricStylingApp: React.FC<{
   );
 
   return (
-    <div className="flex h-full w-full flex-col pt-3">
+    <div className="flex h-full w-full flex-col overflow-hidden pt-3">
       <MetricStylingAppSegment
         className="px-4"
         segment={segment}
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx
index b68234fa1..79869e48b 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisAvailableItemsList.tsx
@@ -28,20 +28,22 @@ export const AvailableItemsList: React.FC<AvailableItemsListProps> = ({
     (isOver || isActive) && activeZone !== SelectAxisContainerId.Available;
 
   return (
-    <StylingLabel id="available-items-list" label="Available" ref={setNodeRef}>
-      <div
-        className={cn(
-          'mb-1',
-          showDeleteHoverState ? 'rounded bg-red-100 shadow-[0_0_3px_1px] shadow-red-300' : ''
-        )}>
-        {items.map((item) => (
-          <SelectAxisSortableItem
-            key={item.id}
-            item={item}
-            zoneId={SelectAxisContainerId.Available}
-          />
-        ))}
-      </div>
-    </StylingLabel>
+    <div ref={setNodeRef}>
+      <StylingLabel id="available-items-list" label="Available">
+        <div
+          className={cn(
+            'mb-1',
+            showDeleteHoverState ? 'rounded bg-red-100 shadow-[0_0_3px_1px] shadow-red-300' : ''
+          )}>
+          {items.map((item) => (
+            <SelectAxisSortableItem
+              key={item.id}
+              item={item}
+              zoneId={SelectAxisContainerId.Available}
+            />
+          ))}
+        </div>
+      </StylingLabel>
+    </div>
   );
 };