chore(search): standardize search input layout across components and improve spacing

Author: x0sina

dashboard/src/components/groups/groups-list.tsx

@@ -89,16 +89,18 @@ export default function GroupsList({ isDialogOpen, onOpenChange }: GroupsListPro
   }, [groupsData?.groups, searchQuery])
 
   return (
-    <div className="w-full flex-1 space-y-4 pt-4">
+    <div className="w-full flex-1 space-y-4">
       {/* Search Input */}
-      <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
-        <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
-        <Input placeholder={t('search')} value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
-        {searchQuery && (
-          <button onClick={() => setSearchQuery('')} className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}>
-            <X className="h-4 w-4" />
-          </button>
-        )}
+      <div dir={dir} className="flex items-center gap-2 md:gap-4">
+        <div className="relative min-w-0 flex-1 md:w-[calc(100%/3-10px)] md:flex-none">
+          <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+          <Input placeholder={t('search')} value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
+          {searchQuery && (
+            <button onClick={() => setSearchQuery('')} className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}>
+              <X className="h-4 w-4" />
+            </button>
+          )}
+        </div>
       </div>
       <ScrollArea className="h-[calc(100vh-8rem)]">
         <div dir={dir} className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">

dashboard/src/components/nodes/node-filters.tsx

@@ -81,7 +81,7 @@ export const NodeFilters = ({ filters, onFilterChange, refetch, isFetching, adva
   }
 
   return (
-    <div dir={dir} className="flex items-center gap-2 py-4 md:gap-4">
+    <div dir={dir} className="flex items-center gap-2 md:gap-4">
       {/* Search Input */}
       <div className="relative min-w-0 flex-1 md:w-[calc(100%/3-10px)] md:flex-none">
         <SearchIcon className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400 text-input-placeholder')} />

dashboard/src/components/settings/cores.tsx

@@ -118,8 +118,8 @@ export default function Cores({ isDialogOpen, onOpenChange, cores, onEditCore, o
   }, [coresList, searchQuery])
 
   return (
-    <div className={cn('flex w-full flex-col gap-4 py-4', dir === 'rtl' && 'rtl')}>
-      <div className="mt-2">
+    <div className={cn('flex w-full flex-col gap-4 pt-4', dir === 'rtl' && 'rtl')}>
+      <div>
         {/* Search Input */}
         <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
           <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />

dashboard/src/pages/_dashboard.groups.tsx

@@ -14,7 +14,7 @@ export default function GroupsPage() {
         <Separator />
       </div>
 
-      <div className="w-full px-4 pt-2">
+      <div className="w-full p-4">
         <div className="transform-gpu animate-slide-up" style={{ animationDuration: '500ms', animationDelay: '100ms', animationFillMode: 'both' }}>
           <Groups isDialogOpen={isDialogOpen} onOpenChange={setIsDialogOpen} />
         </div>

dashboard/src/pages/_dashboard.hosts.tsx

@@ -219,7 +219,7 @@ export default function HostsPage() {
         <Separator />
       </div>
 
-      <div className="w-full px-4 pt-6">
+      <div className="w-full p-4">
         {isLoading ? (
           <div className="grid w-full grid-cols-1 gap-4 py-6 md:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, index) => (

dashboard/src/pages/_dashboard.statistics.tsx

@@ -41,7 +41,7 @@ const Statistics = () => {
       </div>
 
       {/* Node Selector at the top */}
-      <div className="w-full px-3 pt-3 sm:px-4 sm:pt-4">
+      <div className="w-full px-4 pt-2 sm:px-4 sm:pt-4">
         <div className="transform-gpu animate-slide-up" style={{ animationDuration: '500ms', animationDelay: '50ms', animationFillMode: 'both' }}>
           <Card>
             <CardContent className="p-4 sm:p-6">

dashboard/src/pages/_dashboard.templates.tsx

@@ -128,16 +128,18 @@ export default function UserTemplates() {
         <Separator />
       </div>
 
-      <div className="w-full flex-1 space-y-4 px-4 py-4">
+      <div className="w-full flex-1 space-y-4 px-4">
         {/* Search Input */}
-        <div className="relative w-full md:w-[calc(100%/3-10px)]" dir={dir}>
-          <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
-          <Input placeholder={t('search')} value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
-          {searchQuery && (
-            <button onClick={() => setSearchQuery('')} className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}>
-              <X className="h-4 w-4" />
-            </button>
-          )}
+        <div dir={dir} className="flex items-center gap-2 md:gap-4 pt-4">
+          <div className="relative min-w-0 flex-1 md:w-[calc(100%/3-10px)] md:flex-none">
+            <Search className={cn('absolute', dir === 'rtl' ? 'right-2' : 'left-2', 'top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground')} />
+            <Input placeholder={t('search')} value={searchQuery} onChange={e => setSearchQuery(e.target.value)} className={cn('pl-8 pr-10', dir === 'rtl' && 'pl-10 pr-8')} />
+            {searchQuery && (
+              <button onClick={() => setSearchQuery('')} className={cn('absolute', dir === 'rtl' ? 'left-2' : 'right-2', 'top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground')}>
+                <X className="h-4 w-4" />
+              </button>
+            )}
+          </div>
         </div>
 
         <div
@@ -153,7 +155,7 @@ export default function UserTemplates() {
                         <Skeleton className="h-2 w-2 shrink-0 rounded-full" />
                         <Skeleton className="h-5 w-24 sm:w-32" />
                       </div>
-                      <div className="mt-2 space-y-2">
+                      <div className="space-y-2">
                         <Skeleton className="h-4 w-32 sm:w-40 md:w-48" />
                         <Skeleton className="h-4 w-28 sm:w-36 md:w-40" />
                       </div>