refactor(panel): uniform margins

panel/src/components/AppShell.tsx

@@ -122,7 +122,9 @@ export function AppShell() {
           </div>
         </header>
         <main className="flex-1 p-6">
-          <Outlet />
+          <div className="mx-auto max-w-7xl space-y-7">
+            <Outlet />
+          </div>
         </main>
       </div>
     </div>

panel/src/pages/Account.tsx

@@ -67,7 +67,7 @@ export function Account() {
   }
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6">
+    <>
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
         <p className="text-sm text-muted-foreground">
@@ -119,7 +119,7 @@ export function Account() {
           )}
         </CardContent>
       </Card>
-    </div>
+    </>
   );
 }
 

panel/src/pages/Dashboard.tsx

@@ -81,7 +81,7 @@ export function Dashboard() {
   const error = serversErr || linkErr || meErr;
 
   return (
-    <div className="mx-auto max-w-6xl space-y-6">
+    <>
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{t("title")}</h1>
         <p className="text-sm text-muted-foreground">{t("subtitle")}</p>
@@ -102,7 +102,7 @@ export function Dashboard() {
           isAdmin={!!identity?.is_admin}
         />
       )}
-    </div>
+    </>
   );
 }
 

panel/src/pages/MyServers.tsx

@@ -15,7 +15,7 @@ export function MyServers() {
   const servers = data ?? [];
 
   return (
-    <div className="mx-auto max-w-6xl space-y-6">
+    <>
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{t("my_servers_title")}</h1>
         <p className="text-sm text-muted-foreground">
@@ -47,6 +47,6 @@ export function MyServers() {
           {t("my_servers_footer")}
         </CardContent>
       </Card>
-    </div>
+    </>
   );
 }

panel/src/pages/ServerConsole.tsx

@@ -76,7 +76,7 @@ export function ServerConsole() {
   const streamable = data?.phase === "Running" || data?.phase === "Starting";
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6">
+    <>
       <Link
         to="/servers"
         className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
@@ -143,6 +143,6 @@ export function ServerConsole() {
           </Card>
         </>
       ) : null}
-    </div>
+    </>
   );
 }

panel/src/pages/admin/AdminHome.tsx

@@ -28,7 +28,7 @@ export function AdminHome() {
   ];
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6">
+    <>
       <div className="flex items-center gap-3">
         <ShieldCheck className="h-6 w-6 text-primary" />
         <div>
@@ -61,6 +61,6 @@ export function AdminHome() {
           {t("footer_post")}
         </CardContent>
       </Card>
-    </div>
+    </>
   );
 }

panel/src/pages/admin/ImageAdmin.tsx

@@ -17,7 +17,7 @@ export function ImageAdmin() {
   const images = data ?? [];
 
   return (
-    <div className="mx-auto max-w-4xl space-y-6">
+    <>
       <div>
         <h1 className="text-2xl font-semibold tracking-tight">{t("images_title")}</h1>
         <p className="text-sm text-muted-foreground">
@@ -62,6 +62,6 @@ export function ImageAdmin() {
           ))}
         </div>
       )}
-    </div>
+    </>
   );
 }

panel/src/pages/admin/ServerAdmin.tsx

@@ -23,7 +23,7 @@ export function ServerAdmin() {
   const servers = data ?? [];
 
   return (
-    <div className="mx-auto max-w-6xl space-y-6">
+    <>
       <div className="flex items-center justify-between gap-4">
         <div>
           <h1 className="text-2xl font-semibold tracking-tight">{t("servers")}</h1>
@@ -58,6 +58,6 @@ export function ServerAdmin() {
           {ts("server_admin_footer")}
         </CardContent>
       </Card>
-    </div>
+    </>
   );
 }

panel/src/pages/ops/FleetTable.tsx

@@ -9,7 +9,7 @@ import { PendingBackend } from "@/components/States";
 export function FleetTable() {
   const { t } = useTranslation("ops");
   return (
-    <div className="mx-auto max-w-5xl space-y-6">
+    <>
       <div className="flex items-center gap-3">
         <Network className="h-6 w-6 text-primary" />
         <div>
@@ -24,6 +24,6 @@ export function FleetTable() {
         endpoint="GET /api/v1/admin/servers"
         note={t("fleet_table_pending_note")}
       />
-    </div>
+    </>
   );
 }

panel/src/pages/ops/OpsOverview.tsx

@@ -14,7 +14,7 @@ import { PendingBackend } from "@/components/States";
 export function OpsOverview() {
   const { t } = useTranslation("ops");
   return (
-    <div className="mx-auto max-w-4xl space-y-6">
+    <>
       <div className="flex items-center gap-3">
         <Gauge className="h-6 w-6 text-primary" />
         <div>
@@ -53,6 +53,6 @@ export function OpsOverview() {
           </span>
         </CardContent>
       </Card>
-    </div>
+    </>
   );
 }