mobile responsive

components/list-shell.tsx

@@ -48,7 +48,7 @@ export function ListShell({
   return (
     <div className="space-y-5">
       <div className="flex flex-wrap items-center justify-between gap-3">
-        <h1 className="text-2xl font-semibold text-foreground">
+        <h1 className="text-xl font-semibold text-foreground sm:text-2xl">
           {title}
           <span className="ml-2 text-sm font-normal text-muted-foreground">
             {total.toLocaleString()}
@@ -58,7 +58,7 @@ export function ListShell({
       </div>
 
       {onQueryChange ? (
-        <div className="relative max-w-md">
+        <div className="relative w-full sm:max-w-md">
           <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={raw}
@@ -77,7 +77,7 @@ export function ListShell({
         {children}
       </div>
 
-      <div className="flex items-center justify-between text-sm text-muted-foreground">
+      <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-muted-foreground">
         <span>
           Page {list.page} of {list.totalPages}
           {list.loading ? " · loading…" : ""}