From c5f3db4513055fec148ea05f9b43f8ab990935fe Mon Sep 17 00:00:00 2001
From: gtarpenning <griffin.tarpenning@wandb.com>
Date: Tue, 10 Dec 2024 15:05:30 -0800
Subject: [PATCH] increase gap from 8 -> 16 to match prod, allow overflow with
 horizontal scrollbar

---
 .../ComparisonDefinitionSection.tsx           | 23 +++++++++++--------
 .../DraggableSection/DraggableSection.tsx     |  2 +-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
index 60529c6d141..2704a66cbea 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx
@@ -69,16 +69,19 @@ export const ComparisonDefinitionSection: React.FC<{
 
   return (
     <Tailwind>
-      <div className="flex w-full items-center gap-4 px-16 pt-12">
-        <DraggableSection
-          useDragHandle
-          axis="xy"
-          state={props.state}
-          items={items}
-          onSetBaseline={onSetBaseline}
-          onRemoveItem={onRemoveItem}
-          onSortEnd={onSortEnd}
-        />
+      <div className="flex w-full items-center gap-4 overflow-x-auto px-16">
+        <HorizontalBox>
+          <DraggableSection
+            useDragHandle
+            axis="x"
+            state={props.state}
+            items={items}
+            onSetBaseline={onSetBaseline}
+            onRemoveItem={onRemoveItem}
+            onSortEnd={onSortEnd}
+            useWindowAsScrollContainer
+          />
+        </HorizontalBox>
         <HorizontalBox>
           <AddEvaluationButton state={props.state} />
         </HorizontalBox>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx
index 0cd09c92dd1..23a03ceb5b3 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx
@@ -15,7 +15,7 @@ type DraggableSectionProps = {
 export const DraggableSection = SortableContainer(
   ({state, items, onSetBaseline, onRemoveItem}: DraggableSectionProps) => {
     return (
-      <div className="flex flex-wrap items-center gap-8">
+      <div className="flex flex-wrap items-center gap-16">
         {items.map((item, index) => (
           <DraggableItem
             key={`item-${item.value}`}