increase gap from 8 -> 16 to match prod, allow overflow with horizont…

…al scrollbar
wandb · Dec 10, 2024 · c5f3db4 · c5f3db4
1 parent ed1a27d
commit c5f3db4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/...mpareEvaluationsPage/sections/ComparisonDefinitionSection/ComparisonDefinitionSection.tsx b/...mpareEvaluationsPage/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/.../Home/Browse3/pages/CompareEvaluationsPage/sections/DraggableSection/DraggableSection.tsx b/.../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}`}