From c5b50c10f495f8604ccc263a583db6249efe1086 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Mon, 20 Mar 2023 01:18:44 -0700
Subject: [PATCH] Fix pair editor container

---
 src-web/components/core/PairEditor.tsx |   6 +-
 src-web/components/core/ScrollArea.tsx |   8 +-
 src-web/components/core/Tabs/Tabs.tsx  | 107 +++++++++++++------------
 3 files changed, 66 insertions(+), 55 deletions(-)

diff --git a/src-web/components/core/PairEditor.tsx b/src-web/components/core/PairEditor.tsx
index 2dec5867..5bd532c5 100644
--- a/src-web/components/core/PairEditor.tsx
+++ b/src-web/components/core/PairEditor.tsx
@@ -263,9 +263,9 @@ const FormRow = memo(function FormRow({
       />
       <div
         className={classNames(
-          'grid gap-2 items-center',
-          '@xs:!grid-rows-1 @sm:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',
-          'grid-cols-1 grid-rows-2',
+          'grid items-center',
+          '@xs:gap-2 @xs:!grid-rows-1 @xs:!grid-cols-[minmax(0,1fr)_minmax(0,1fr)]',
+          'gap-0.5 grid-cols-1 grid-rows-2',
         )}
       >
         <Input
diff --git a/src-web/components/core/ScrollArea.tsx b/src-web/components/core/ScrollArea.tsx
index 46c8c812..884fd257 100644
--- a/src-web/components/core/ScrollArea.tsx
+++ b/src-web/components/core/ScrollArea.tsx
@@ -5,11 +5,15 @@ import type { ReactNode } from 'react';
 interface Props {
   children: ReactNode;
   className?: string;
+  type?: S.ScrollAreaProps['type'];
 }
 
-export function ScrollArea({ children, className }: Props) {
+export function ScrollArea({ children, className, type }: Props) {
   return (
-    <S.Root className={classnames(className, 'group/scroll overflow-hidden')} type="hover">
+    <S.Root
+      className={classnames(className, 'group/scroll overflow-hidden')}
+      type={type ?? 'hover'}
+    >
       <S.Viewport className="h-full w-full">{children}</S.Viewport>
       <ScrollBar orientation="vertical" />
       <ScrollBar orientation="horizontal" />
diff --git a/src-web/components/core/Tabs/Tabs.tsx b/src-web/components/core/Tabs/Tabs.tsx
index 3706e444..3188d9db 100644
--- a/src-web/components/core/Tabs/Tabs.tsx
+++ b/src-web/components/core/Tabs/Tabs.tsx
@@ -6,6 +6,7 @@ import { Button } from '../Button';
 import type { DropdownMenuRadioItem, DropdownMenuRadioProps } from '../Dropdown';
 import { DropdownMenuRadio, DropdownMenuTrigger } from '../Dropdown';
 import { Icon } from '../Icon';
+import { ScrollArea } from '../ScrollArea';
 import { HStack } from '../Stacks';
 
 import './Tabs.css';
@@ -47,24 +48,43 @@ export const Tabs = memo(function Tabs({
     >
       <T.List
         aria-label={label}
-        className={classnames(tabListClassName, 'h-auto flex items-center overflow-x-auto pb-1')}
+        className={classnames(tabListClassName, 'h-auto flex items-center pb-1')}
       >
-        <HStack space={1}>
-          {tabs.map((t) => {
-            const isActive = t.value === value;
-            if (t.options && isActive) {
-              return (
-                <DropdownMenuRadio
-                  key={t.value}
-                  items={t.options.items}
-                  value={t.options.value}
-                  onValueChange={t.options.onValueChange}
-                >
-                  <DropdownMenuTrigger>
+        <ScrollArea>
+          <HStack space={1}>
+            {tabs.map((t) => {
+              const isActive = t.value === value;
+              if (t.options && isActive) {
+                return (
+                  <DropdownMenuRadio
+                    key={t.value}
+                    items={t.options.items}
+                    value={t.options.value}
+                    onValueChange={t.options.onValueChange}
+                  >
+                    <DropdownMenuTrigger>
+                      <Button
+                        color="custom"
+                        size="sm"
+                        onClick={(e) => e.stopPropagation()}
+                        className={classnames(
+                          isActive
+                            ? 'bg-gray-100 text-gray-900'
+                            : 'text-gray-600 hover:text-gray-900',
+                        )}
+                      >
+                        {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
+                        <Icon icon="triangleDown" className="-mr-1.5" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                  </DropdownMenuRadio>
+                );
+              } else if (t.options && !isActive) {
+                return (
+                  <T.Trigger asChild key={t.value} value={t.value}>
                     <Button
                       color="custom"
                       size="sm"
-                      onClick={(e) => e.stopPropagation()}
                       className={classnames(
                         isActive
                           ? 'bg-gray-100 text-gray-900'
@@ -72,43 +92,30 @@ export const Tabs = memo(function Tabs({
                       )}
                     >
                       {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                      <Icon icon="triangleDown" className="-mr-1.5" />
+                      <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
                     </Button>
-                  </DropdownMenuTrigger>
-                </DropdownMenuRadio>
-              );
-            } else if (t.options && !isActive) {
-              return (
-                <T.Trigger asChild key={t.value} value={t.value}>
-                  <Button
-                    color="custom"
-                    size="sm"
-                    className={classnames(
-                      isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                    )}
-                  >
-                    {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                    <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
-                  </Button>
-                </T.Trigger>
-              );
-            } else {
-              return (
-                <T.Trigger asChild key={t.value} value={t.value}>
-                  <Button
-                    color="custom"
-                    size="sm"
-                    className={classnames(
-                      isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                    )}
-                  >
-                    {t.label}
-                  </Button>
-                </T.Trigger>
-              );
-            }
-          })}
-        </HStack>
+                  </T.Trigger>
+                );
+              } else {
+                return (
+                  <T.Trigger asChild key={t.value} value={t.value}>
+                    <Button
+                      color="custom"
+                      size="sm"
+                      className={classnames(
+                        isActive
+                          ? 'bg-gray-100 text-gray-900'
+                          : 'text-gray-600 hover:text-gray-900',
+                      )}
+                    >
+                      {t.label}
+                    </Button>
+                  </T.Trigger>
+                );
+              }
+            })}
+          </HStack>
+        </ScrollArea>
       </T.List>
       {children}
     </T.Root>