fix: tab style for conns and proxies

src/pages/Connections.tsx

@@ -307,47 +307,49 @@ export default () => {
 
   return (
     <div class="flex h-full flex-col gap-2 p-1">
-      <div class="tabs-boxed tabs gap-2">
-        <For each={tabs()}>
-          {(tab) => (
-            <button
-              class={twMerge(
-                activeTab() === tab.type && 'tab-active',
-                'tab gap-2',
-              )}
-              onClick={() => setActiveTab(tab.type)}
-            >
-              <span>{tab.name}</span>
-              <div class="badge badge-sm">{tab.count}</div>
-            </button>
-          )}
-        </For>
-      </div>
-
       <div class="flex w-full flex-wrap items-center gap-2">
-        <input
+        <div class="tabs-boxed tabs gap-2">
-          class="input input-primary input-sm flex-1"
+          <For each={tabs()}>
-          placeholder={t('search')}
+            {(tab) => (
-          onInput={(e) => setSearch(e.target.value)}
+              <button
-        />
+                class={twMerge(
+                  activeTab() === tab.type && 'tab-active',
+                  'tab gap-2 px-2',
+                )}
+                onClick={() => setActiveTab(tab.type)}
+              >
+                <span>{tab.name}</span>
+                <div class="badge badge-sm">{tab.count}</div>
+              </button>
+            )}
+          </For>
+        </div>
 
-        <Button
+        <div class="flex w-full items-center gap-2 md:flex-1">
-          class="btn-circle btn-sm"
+          <input
-          onClick={() => setPaused((paused) => !paused)}
+            class="input input-primary input-sm flex-1"
-        >
+            placeholder={t('search')}
-          {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
+            onInput={(e) => setSearch(e.target.value)}
-        </Button>
+          />
 
-        <Button
+          <Button
-          class="btn-circle btn-sm"
+            class="btn-circle btn-sm"
-          onClick={() => request.delete('connections')}
+            onClick={() => setPaused((paused) => !paused)}
-        >
+          >
-          <IconCircleX />
+            {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
-        </Button>
+          </Button>
 
-        <label for="connection-modal" class="btn btn-circle btn-sm">
+          <Button
-          <IconSettings />
+            class="btn-circle btn-sm"
-        </label>
+            onClick={() => request.delete('connections')}
+          >
+            <IconCircleX />
+          </Button>
+
+          <label for="connection-modal" class="btn btn-circle btn-sm">
+            <IconSettings />
+          </label>
+        </div>
 
         <ConnectionsTableOrderingModal
           order={columnOrder()}

src/pages/Proxies.tsx

@@ -92,8 +92,8 @@ export default () => {
   return (
     <div class="flex h-full flex-col gap-2">
       <Show when={proxyProviders().length > 0}>
-        <div class="flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2">
-          <div class="tabs-boxed tabs gap-2">
+          <div class="tabs tabs-boxed gap-2">
             <For each={tabs()}>
               {(tab) => (
                 <button