Got tab content scrolling working

src-web/Workspace.tsx

@@ -20,35 +20,33 @@ export function Workspace({ matches }: { path: string; matches?: Params }) {
   const isH = width > 900;
 
   return (
-    <div className="grid grid-cols-[auto_1fr] h-full text-gray-900 overflow-hidden">
+    <div className="grid grid-cols-[auto_1fr] h-full text-gray-900">
       <Sidebar
         requests={requests ?? []}
         workspaceId={workspaceId}
         activeRequestId={matches?.requestId}
       />
       {request && (
-        <div className="h-full">
-          <div className="grid grid-rows-[auto_1fr] h-full overflow-hidden">
-            <HStack
-              as={WindowDragRegion}
-              className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
-              alignItems="center"
-            >
-              {request.name}
-            </HStack>
-            <div
-              className={classnames(
-                'grid overflow-auto',
-                isH ? 'grid-cols-[1fr_1fr]' : 'grid-rows-[minmax(0,auto)_minmax(0,100%)]',
-              )}
-            >
-              <RequestPane
-                fullHeight={isH}
-                request={request}
-                className={classnames(!isH && 'pr-2 pb-0')}
-              />
-              <ResponsePane requestId={request.id} />
-            </div>
+        <div className="grid grid-rows-[auto_minmax(0,1fr)] h-full">
+          <HStack
+            as={WindowDragRegion}
+            className="px-3 bg-gray-50 text-gray-900 border-b border-b-gray-200 pt-[1px]"
+            alignItems="center"
+          >
+            {request.name}
+          </HStack>
+          <div
+            className={classnames(
+              'grid overflow-auto',
+              isH ? 'grid-cols-[1fr_1fr]' : 'grid-rows-[minmax(0,auto)_minmax(0,100%)]',
+            )}
+          >
+            <RequestPane
+              fullHeight={isH}
+              request={request}
+              className={classnames(!isH && 'pr-2 pb-0')}
+            />
+            <ResponsePane requestId={request.id} />
           </div>
         </div>
       )}

src-web/components/Button.tsx

@@ -47,7 +47,7 @@ export const Button = forwardRef(function Button(
         className,
         'outline-none',
         'border border-transparent focus-visible:border-blue-300',
-        'transition-all rounded-md flex items-center',
+        'rounded-md flex items-center',
         colorStyles[color || 'default'],
         justify === 'start' && 'justify-start',
         justify === 'center' && 'justify-center',

src-web/components/HeaderEditor.tsx

@@ -59,35 +59,34 @@ export function HeaderEditor({ request }: Props) {
   };
 
   return (
-    <VStack space={2}>
-      {pairs.map((p, i) => (
-        <FormRow
-          key={p.id}
-          pair={p}
-          onChange={handleChangeHeader}
-          onDelete={i < pairs.length - 1 ? handleDelete : undefined}
-        />
-      ))}
-    </VStack>
+    <div className="pb-6">
+      <VStack space={2}>
+        {pairs.map((p, i) => (
+          <FormRow
+            key={p.id}
+            pair={p}
+            onChange={handleChangeHeader}
+            onDelete={i < pairs.length - 1 ? handleDelete : undefined}
+          />
+        ))}
+      </VStack>
+    </div>
   );
 }
 
 function FormRow({
-  autoFocus,
   pair,
   onChange,
   onDelete,
 }: {
-  autoFocus?: boolean;
   pair: PairWithId;
   onChange: (pair: PairWithId) => void;
   onDelete?: (pair: PairWithId) => void;
 }) {
   return (
-    <div className="grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
+    <div className="group grid grid-cols-[1fr_1fr_2.5rem] grid-rows-1 gap-2 items-center">
       <Input
         hideLabel
-        autoFocus={autoFocus}
         useEditor={{ useTemplating: true }}
         name="name"
         label="Name"
@@ -104,7 +103,13 @@ function FormRow({
         defaultValue={pair.header.value}
         onChange={(value) => onChange({ id: pair.id, header: { value } })}
       />
-      {onDelete && <IconButton icon="trash" onClick={() => onDelete(pair)} className="w-auto" />}
+      {onDelete && (
+        <IconButton
+          icon="trash"
+          onClick={() => onDelete(pair)}
+          className="invisible group-hover:visible"
+        />
+      )}
     </div>
   );
 }

src-web/components/Icon.tsx

@@ -64,7 +64,7 @@ export function Icon({ icon, spin, size = 'md', className }: IconProps) {
     <Component
       className={classnames(
         className,
-        'text-gray-800',
+        'text-inherit',
         size === 'md' && 'h-4 w-4',
         size === 'sm' && 'h-3 w-3',
         size === 'xs' && 'h-2 w-2',

src-web/components/IconButton.tsx

@@ -16,7 +16,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
       ref={ref}
       className={classnames(
         className,
-        'group',
+        'text-gray-700 hover:text-gray-1000',
         '!px-0',
         size === 'md' && 'w-9',
         size === 'sm' && 'w-9',
@@ -28,11 +28,7 @@ export const IconButton = forwardRef<HTMLButtonElement, Props>(function IconButt
         size={iconSize}
         icon={icon}
         spin={spin}
-        className={classnames(
-          iconClassName,
-          'text-gray-700 group-hover:text-gray-1000',
-          props.disabled && 'opacity-70',
-        )}
+        className={classnames(iconClassName, props.disabled && 'opacity-70')}
       />
     </Button>
   );

src-web/components/ResponsePane.tsx

@@ -54,7 +54,7 @@ export function ResponsePane({ requestId, className }: Props) {
           <>
             <HStack
               alignItems="center"
-              className="italic text-gray-600 text-sm w-full mb-1 flex-shrink-0 pl-2"
+              className="italic text-gray-700 text-sm w-full mb-1 flex-shrink-0 pl-2"
             >
               {response.status > 0 && (
                 <div className="whitespace-nowrap">
@@ -97,12 +97,7 @@ export function ResponsePane({ requestId, className }: Props) {
                     })),
                   ]}
                 >
-                  <IconButton
-                    icon="clock"
-                    className="ml-auto"
-                    iconClassName="text-gray-300"
-                    size="sm"
-                  />
+                  <IconButton icon="clock" className="ml-auto" size="sm" />
                 </Dropdown>
               </HStack>
             </HStack>

src-web/components/ScrollArea.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export function ScrollArea({ children, className }: Props) {
   return (
-    <S.Root className={classnames(className, 'group')} type="always">
+    <S.Root className={classnames(className, 'group/scroll')} type="always">
       <S.Viewport>{children}</S.Viewport>
       <ScrollBar orientation="vertical" />
       <ScrollBar orientation="horizontal" />
@@ -28,7 +28,7 @@ function ScrollBar({ orientation }: { orientation: 'vertical' | 'horizontal' })
         orientation === 'horizontal' && 'h-1.5 flex-col',
       )}
     >
-      <S.Thumb className="flex-1 bg-gray-100 group-hover:bg-gray-200 rounded-full" />
+      <S.Thumb className="flex-1 bg-gray-100 group-hover/scroll:bg-gray-200 rounded-full" />
     </S.Scrollbar>
   );
 }

src-web/components/Stacks.tsx

@@ -92,7 +92,7 @@ function BaseStack({ className, alignItems, justifyContent, children, as }: Base
     <Component
       className={classnames(
         className,
-        'flex flex-grow-0',
+        'flex',
         alignItems === 'center' && 'items-center',
         alignItems === 'start' && 'items-start',
         justifyContent === 'start' && 'justify-start',

src-web/components/Tabs.tsx

@@ -23,9 +23,16 @@ export function Tabs({ defaultValue, label, children, tabs, className, tabListCl
     <T.Root
       defaultValue={defaultValue}
       onValueChange={setValue}
-      className={classnames(className, 'h-full overflow-hidden')}
+      className={classnames(
+        className,
+        // 'h-full overflow-hidden grid grid-rows-[auto_minmax(0,1fr)]',
+        'h-full flex flex-col min-h-[min-content]',
+      )}
     >
-      <T.List aria-label={label} className={classnames(tabListClassName, 'flex items-center')}>
+      <T.List
+        aria-label={label}
+        className={classnames(tabListClassName, 'h-auto flex items-center')}
+      >
         <ScrollArea className="w-full pb-2">
           <HStack space={1}>
             {tabs.map((t) => (
@@ -75,7 +82,7 @@ export function TabContent({ value, children, className }: TabContentProps) {
     <T.Content
       forceMount
       value={value}
-      className={classnames(className, 'tab-content', 'w-full h-full')}
+      className={classnames(className, 'tab-content', 'w-full overflow-auto flex-grow h-0')}
     >
       {children}
     </T.Content>