Better response headers

src-web/components/core/CountBadge.tsx

@@ -5,8 +5,10 @@ interface Props {
 export function CountBadge({ count }: Props) {
   if (count === 0) return null;
   return (
-    <div aria-hidden className="opacity-80 text-2xs border rounded px-1 mb-0.5 ml-1 h-4">
-      {count}
-    </div>
+    <>
+      <div aria-hidden className="opacity-70 text-3xs rounded mb-0.5 ml-1 h-4 font-mono">
+        {count}
+      </div>
+    </>
   );
 }

src-web/components/core/PairEditor.tsx

@@ -117,13 +117,12 @@ export const PairEditor = memo(function PairEditor({
   );
 
   const handleFocus = useCallback(
-    (pair: PairContainer) => {
-      const isLast = pair.id === pairs[pairs.length - 1]?.id;
-      if (isLast) {
-        setPairs((pairs) => [...pairs, newPairContainer()]);
-      }
-    },
-    [pairs],
+    (pair: PairContainer) =>
+      setPairs((pairs) => {
+        const isLast = pair.id === pairs[pairs.length - 1]?.id;
+        return isLast ? [...pairs, newPairContainer()] : pairs;
+      }),
+    [],
   );
 
   // Ensure there's always at least one pair
@@ -138,7 +137,7 @@ export const PairEditor = memo(function PairEditor({
       className={classnames(
         className,
         '@container',
-        'overflow-auto max-h-full pb-2 grid',
+        'pb-2 grid',
         // Move over the width of the drag handle
         '-ml-3',
       )}

src-web/components/core/Tabs/Tabs.tsx

@@ -73,18 +73,15 @@ export function Tabs({
         aria-label={label}
         className={classnames(
           tabListClassName,
-          'h-md flex items-center overflow-x-auto hide-scrollbars',
-          // Give space for button focus states within overflow boundary
+          'flex items-center overflow-x-auto hide-scrollbars mt-1 mb-2',
+          // Give space for button focus states within overflow boundary.
           'px-2 -mx-2',
         )}
       >
-        <HStack space={3} className="-ml-1 flex-shrink-0">
+        <HStack space={1} className="flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
-            const btnClassName = classnames(
-              '!px-1',
-              isActive ? 'text-gray-900' : 'text-gray-600 hover:text-gray-800',
-            );
+            const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600');
             if ('options' in t) {
               const option = t.options.items.find(
                 (i) => 'value' in i && i.value === t.options?.value,
@@ -148,7 +145,7 @@ export const TabContent = memo(function TabContent({
     <div
       tabIndex={-1}
       data-tab={value}
-      className={classnames(className, 'tab-content', 'hidden w-full h-full')}
+      className={classnames(className, 'tab-content', 'overflow-auto hidden w-full h-full')}
     >
       {children}
     </div>