style(panel): refine search and filter layout to align with header

panel/src/pages/MyServers.tsx

@@ -46,6 +46,7 @@ export function MyServers() {
 
   return (
     <>
+      <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>
@@ -57,17 +58,19 @@ export function MyServers() {
         </div>
 
         {servers.length > 0 && cfg && (
-        <div className="flex flex-col gap-3 sm:flex-row sm:items-center my-4">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center w-full md:w-auto">
-          <div className="relative flex-1 max-w-md">
+            <div className="relative w-full sm:w-64">
-            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <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="pl-9 pr-8"
+                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
@@ -76,13 +79,13 @@ export function MyServers() {
                     setSearchQuery("");
                     setPage(1);
                   }}
-                className="absolute right-2.5 top-2.5 text-muted-foreground hover:text-foreground"
+                  className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                 >
-                <X className="h-4 w-4" />
+                  <X className="h-3.5 w-3.5" />
                 </button>
               )}
             </div>
-          <div className="w-[180px]">
+            <div className="w-full sm:w-36">
               <Select
                 value={statusFilter}
                 onValueChange={(val) => {
@@ -90,7 +93,7 @@ export function MyServers() {
                   setPage(1);
                 }}
               >
-              <SelectTrigger className="w-full">
+                <SelectTrigger className="h-8 text-sm">
                   <SelectValue placeholder={t("filter_status_all")} />
                 </SelectTrigger>
                 <SelectContent>
@@ -105,6 +108,7 @@ export function MyServers() {
             </div>
           </div>
         )}
+      </div>
 
       {loading && !data ? (
         <Loading />