From 3f04b727e5ae9773b465a59b6a7a14d59d6d5de3 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 1 Apr 2025 16:09:22 -0600
Subject: [PATCH] change segments for edit metrics

---
 .../MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx   | 2 +-
 .../SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx        | 2 +-
 .../SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx       | 2 +-
 .../SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx        | 2 +-
 .../SelectAxis/SelectAxisColumnContent/EditShowDataLabel.tsx    | 2 +-
 .../SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx   | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx
index 151adc4c5..b0c326bb0 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditBarAxisSorting.tsx
@@ -47,7 +47,7 @@ export const EditBarSorting: React.FC<{
   return (
     <LabelAndInput label="Sorting">
       <div className="flex justify-end">
-        <AppSegmented options={options} value={selectedOption} onChange={onChange} block={false} />
+        <AppSegmented options={options} value={selectedOption} onChange={onChange} type="button" />
       </div>
     </LabelAndInput>
   );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
index 4cfb8f9d8..649dbfd1f 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditDisplayAs.tsx
@@ -57,7 +57,7 @@ export const EditDisplayAs: React.FC<{
   return (
     <LabelAndInput label="Display as">
       <div className="flex justify-end">
-        <AppSegmented options={options} block={false} value={selectedOption} onChange={onChange} />
+        <AppSegmented options={options} type="button" value={selectedOption} onChange={onChange} />
       </div>
     </LabelAndInput>
   );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
index 9908d8e38..4353903d0 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLabelStyle.tsx
@@ -41,7 +41,7 @@ export const EditLabelStyle: React.FC<{
   return (
     <LabelAndInput label="Style">
       <div className="flex items-center justify-end">
-        <AppSegmented options={options} value={style} onChange={onChange} />
+        <AppSegmented options={options} value={style} type="button" onChange={onChange} />
       </div>
     </LabelAndInput>
   );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
index fe09b0363..ee663ed47 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditLineStyle.tsx
@@ -116,9 +116,9 @@ export const EditLineStyle: React.FC<{
         <div className="flex justify-end">
           <AppSegmented
             options={shownOptions}
-            block={false}
             value={selectedOption}
             onChange={onChange}
+            type="button"
           />
         </div>
       </LabelAndInput>
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditShowDataLabel.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditShowDataLabel.tsx
index 967c22fb1..c52e8f5ec 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditShowDataLabel.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnContent/EditShowDataLabel.tsx
@@ -12,7 +12,7 @@ export const EditShowDataLabel: React.FC<{
   ({ showDataLabels, rowCount, onUpdateColumnSettingConfig }) => {
     return (
       <LabelAndInput label="Show data labels">
-        <div className="flex w-full justify-end space-x-2">
+        <div className="flex w-full justify-end gap-x-2">
           <WarningIcon rowCount={rowCount} />
           <Switch
             defaultChecked={showDataLabels}
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
index 6fe8204f7..ac0efbbf8 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisDragContainer/SelectAxisDropzone.tsx
@@ -43,7 +43,7 @@ export const SelectAxisDropZone: React.FC<{
           <SortableContext
             items={zone.items.map((item) => item.id)}
             strategy={verticalListSortingStrategy}>
-            <div className={cn('space-y-0.5 transition', extraClass)}>
+            <div className={cn('space-y-0.5 rounded transition', extraClass)}>
               {zone.items.map((item) => (
                 <SelectAxisSortableItem
                   key={item.originalId}