From fa7bab5ec11dae108eb7f21f4050ec849ea6c5af Mon Sep 17 00:00:00 2001
From: Lemon-miaow <admin@lemonmiaow.xyz>
Date: Thu, 2 Jul 2026 02:28:57 +0800
Subject: [PATCH] style(panel): refine search and filter layout to align with
 header

---
 panel/src/pages/MyServers.tsx | 110 ++++++++++++++++++----------------
 1 file changed, 57 insertions(+), 53 deletions(-)

diff --git a/panel/src/pages/MyServers.tsx b/panel/src/pages/MyServers.tsx
index 40272ca..bdbce3d 100644
--- a/panel/src/pages/MyServers.tsx
+++ b/panel/src/pages/MyServers.tsx
@@ -46,65 +46,69 @@ export function MyServers() {
 
   return (
     <>
-      <div className="flex items-center gap-3">
-        <Server className="h-6 w-6 text-primary" />
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">{t("my_servers_title")}</h1>
-          <p className="text-sm text-muted-foreground">
-            {t("my_servers_subtitle")}
-          </p>
+      <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+        <div className="flex items-center gap-3">
+          <Server className="h-6 w-6 text-primary" />
+          <div>
+            <h1 className="text-2xl font-semibold tracking-tight">{t("my_servers_title")}</h1>
+            <p className="text-sm text-muted-foreground">
+              {t("my_servers_subtitle")}
+            </p>
+          </div>
         </div>
-      </div>
 
-      {servers.length > 0 && cfg && (
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center my-4">
-          <div className="relative flex-1 max-w-md">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-            <Input
-              placeholder={t("search_placeholder")}
-              className="pl-9 pr-8"
-              value={searchQuery}
-              onChange={(e) => {
-                setSearchQuery(e.target.value);
-                setPage(1);
-              }}
-            />
-            {searchQuery && (
-              <button
-                type="button"
-                onClick={() => {
-                  setSearchQuery("");
+        {servers.length > 0 && cfg && (
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center w-full md:w-auto">
+            <div className="relative w-full sm:w-64">
+              <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                placeholder={t("search_placeholder")}
+                className="h-8 pl-8 pr-8 text-sm"
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  setPage(1);
+                }}
+                autoComplete="off"
+                spellCheck={false}
+              />
+              {searchQuery && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setSearchQuery("");
+                    setPage(1);
+                  }}
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+            <div className="w-full sm:w-36">
+              <Select
+                value={statusFilter}
+                onValueChange={(val) => {
+                  setStatusFilter(val);
                   setPage(1);
                 }}
-                className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground"
               >
-                <X className="h-4 w-4" />
-              </button>
-            )}
+                <SelectTrigger className="h-8 text-sm">
+                  <SelectValue placeholder={t("filter_status_all")} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t("filter_status_all")}</SelectItem>
+                  <SelectItem value="Running">{t("phase_running")}</SelectItem>
+                  <SelectItem value="Starting">{t("phase_starting")}</SelectItem>
+                  <SelectItem value="Stopping">{t("phase_stopping")}</SelectItem>
+                  <SelectItem value="Stopped">{t("phase_stopped")}</SelectItem>
+                  <SelectItem value="Failed">{t("phase_failed")}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
           </div>
-          <div className="w-[180px]">
-            <Select
-              value={statusFilter}
-              onValueChange={(val) => {
-                setStatusFilter(val);
-                setPage(1);
-              }}
-            >
-              <SelectTrigger className="w-full">
-                <SelectValue placeholder={t("filter_status_all")} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">{t("filter_status_all")}</SelectItem>
-                <SelectItem value="Running">{t("phase_running")}</SelectItem>
-                <SelectItem value="Starting">{t("phase_starting")}</SelectItem>
-                <SelectItem value="Stopping">{t("phase_stopping")}</SelectItem>
-                <SelectItem value="Stopped">{t("phase_stopped")}</SelectItem>
-                <SelectItem value="Failed">{t("phase_failed")}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      )}
+        )}
+      </div>
 
       {loading && !data ? (
         <Loading />