From c51fe65868e82fe16ec64b5f7358d622a2009658 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 31 Mar 2025 17:25:40 -0600
Subject: [PATCH] fix a few more scroll areas

---
 .../MetricStylingApp/MetricStylingApp.tsx                 | 2 +-
 .../StylingAppColors/ColorsApp/ColorStyleSegments.tsx     | 8 +++-----
 .../StylingAppColors/ColorsApp/ColorsApp.tsx              | 2 +-
 .../StylingAppColors/StylingAppColors.tsx                 | 3 ++-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
index 992ee50db..f91c85e49 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/MetricStylingApp.tsx
@@ -177,7 +177,7 @@ export const MetricStylingApp: React.FC<{
         )}
 
         {segment === MetricStylingAppSegments.COLORS && (
-          <StylingAppColors className="mb-12 px-4" colors={colors} />
+          <StylingAppColors className="px-4" colors={colors} />
         )}
       </ScrollArea>
     </div>
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorStyleSegments.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorStyleSegments.tsx
index 5c0aedf70..8f23b368d 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorStyleSegments.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorStyleSegments.tsx
@@ -28,14 +28,12 @@ const options: SegmentedItem<ColorAppSegments>[] = [
 
 export const ColorStyleSegments: React.FC<{
   setSelectedSegment: (value: ColorAppSegments) => void;
-  initialSelectedSegment: ColorAppSegments;
-}> = React.memo(({ initialSelectedSegment, setSelectedSegment }) => {
+  selectedSegment: ColorAppSegments;
+}> = React.memo(({ selectedSegment, setSelectedSegment }) => {
   const onChange = useMemoizedFn((value: SegmentedItem<ColorAppSegments>) => {
     setSelectedSegment(value.value);
   });
 
-  return (
-    <AppSegmented block options={options} value={initialSelectedSegment} onChange={onChange} />
-  );
+  return <AppSegmented block options={options} value={selectedSegment} onChange={onChange} />;
 });
 ColorStyleSegments.displayName = 'PaletteSegments';
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorsApp.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorsApp.tsx
index f44cfec58..3b056be72 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorsApp.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/ColorsApp/ColorsApp.tsx
@@ -29,7 +29,7 @@ export const ColorsApp: React.FC<{
   return (
     <div className="flex flex-col space-y-2">
       <ColorStyleSegments
-        initialSelectedSegment={initialSelectedSegment}
+        selectedSegment={selectedSegment}
         setSelectedSegment={setSelectedSegment}
       />
 
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/StylingAppColors.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/StylingAppColors.tsx
index 39858b7a8..71126bd85 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/StylingAppColors.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppColors/StylingAppColors.tsx
@@ -8,6 +8,7 @@ import { ColorsApp } from './ColorsApp';
 import { IBusterMetricChartConfig } from '@/api/asset_interfaces';
 import { useMemoizedFn, useUnmount } from '@/hooks';
 import { useUpdateMetricChart } from '@/context/Metrics';
+import { cn } from '@/lib/classMerge';
 
 export const StylingAppColors: React.FC<{
   className: string;
@@ -27,7 +28,7 @@ export const StylingAppColors: React.FC<{
         <SelectColorApp selectedTab={selectedTab} onChange={setSelectedTab} />
       </div>
 
-      <div className={className}>
+      <div className={cn(className, 'mb-12')}>
         <AnimatePresence mode="wait" initial={false}>
           <motion.div
             key={selectedTab}