From 842ce9e00fe5a3f9e117cafb6c181602ef618c94 Mon Sep 17 00:00:00 2001
From: Zephyruso <127948745+Zephyruso@users.noreply.github.com>
Date: Thu, 7 Sep 2023 14:02:10 +0800
Subject: [PATCH] fix: tab style for conns and proxies

---
 src/pages/Connections.tsx | 76 ++++++++++++++++++++-------------------
 src/pages/Proxies.tsx     |  4 +--
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/src/pages/Connections.tsx b/src/pages/Connections.tsx
index f18732e..db368ac 100644
--- a/src/pages/Connections.tsx
+++ b/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
-          class="input input-primary input-sm flex-1"
-          placeholder={t('search')}
-          onInput={(e) => setSearch(e.target.value)}
-        />
+        <div class="tabs-boxed tabs gap-2">
+          <For each={tabs()}>
+            {(tab) => (
+              <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
-          class="btn-circle btn-sm"
-          onClick={() => setPaused((paused) => !paused)}
-        >
-          {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
-        </Button>
+        <div class="flex w-full items-center gap-2 md:flex-1">
+          <input
+            class="input input-primary input-sm flex-1"
+            placeholder={t('search')}
+            onInput={(e) => setSearch(e.target.value)}
+          />
 
-        <Button
-          class="btn-circle btn-sm"
-          onClick={() => request.delete('connections')}
-        >
-          <IconCircleX />
-        </Button>
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => setPaused((paused) => !paused)}
+          >
+            {paused() ? <IconPlayerPlay /> : <IconPlayerPause />}
+          </Button>
 
-        <label for="connection-modal" class="btn btn-circle btn-sm">
-          <IconSettings />
-        </label>
+          <Button
+            class="btn-circle btn-sm"
+            onClick={() => request.delete('connections')}
+          >
+            <IconCircleX />
+          </Button>
+
+          <label for="connection-modal" class="btn btn-circle btn-sm">
+            <IconSettings />
+          </label>
+        </div>
 
         <ConnectionsTableOrderingModal
           order={columnOrder()}
diff --git a/src/pages/Proxies.tsx b/src/pages/Proxies.tsx
index a38cf29..cdbc71e 100644
--- a/src/pages/Proxies.tsx
+++ b/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="tabs-boxed tabs gap-2">
+        <div class="flex items-center gap-2">
+          <div class="tabs tabs-boxed gap-2">
             <For each={tabs()}>
               {(tab) => (
                 <button