Change tabs again

src-web/components/ResponseHeaders.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 export function ResponseHeaders({ headers }: Props) {
   return (
-    <dl className="font-mono text-xs table-fixed w-full">
+    <dl className="text-xs w-full font-mono">
       {headers.map((h, i) => {
         return (
           <HStack
@@ -17,7 +17,7 @@ export function ResponseHeaders({ headers }: Props) {
             className={classnames(i > 0 && 'border-t border-highlightSecondary', 'py-1')}
           >
             <dd className="w-1/3 text-violet-600 select-text cursor-text">{h.name}</dd>
-            <dt className="w-2/3 text-blue-600 select-text cursor-text break-all">{h.value}</dt>
+            <dt className="w-2/3 select-text cursor-text break-all">{h.value}</dt>
           </HStack>
         );
       })}

src-web/components/core/CountBadge.tsx

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

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

@@ -81,7 +81,9 @@ export function Tabs({
         <HStack space={1} className="flex-shrink-0">
           {tabs.map((t) => {
             const isActive = t.value === value;
-            const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600');
+            // const btnClassName = classnames(isActive ? 'bg-highlightSecondary' : 'text-gray-600');
+            const btnClassName = classnames(isActive ? '' : 'text-gray-600', '!px-0 mr-4 ml-[1px]');
+
             if ('options' in t) {
               const option = t.options.items.find(
                 (i) => 'value' in i && i.value === t.options?.value,