From e892b0426a23c15de83594abe1dd0747bc76bbc1 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Wed, 15 Jul 2026 21:07:01 +0200
Subject: [PATCH] Cap admin shell at 75vw instead of full bleed.

Keeps housekeeping wider than the public max-w-7xl grid without stretching edge-to-edge on large screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/admin/admin-mobile-wrapper.tsx | 99 ++++++++++---------
 1 file changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/components/admin/admin-mobile-wrapper.tsx b/src/components/admin/admin-mobile-wrapper.tsx
index 369bbfe0..7807fef1 100644
--- a/src/components/admin/admin-mobile-wrapper.tsx
+++ b/src/components/admin/admin-mobile-wrapper.tsx
@@ -41,56 +41,59 @@ export function AdminMobileWrapper({
 
 	return (
 		<AdminMobileContext.Provider value={mobile}>
-		<div className="min-h-screen bg-[var(--admin-canvas)] flex flex-col lg:flex-row">
-			{/* Mobile header */}
-			<div
-				className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
-					open ? "z-30" : "z-50"
-				}`}
-				style={{
-					backgroundColor: "var(--admin-sidebar-background)",
-					borderColor: "var(--admin-border)",
-				}}
-			>
-				<button
-					type="button"
-					onClick={() => setOpen(!open)}
-					className="flex items-center justify-center w-9 h-9 rounded-lg
+			{/* Shell capped at ~¾ viewport — wider than public max-w-7xl, not full-bleed. */}
+			<div className="min-h-screen bg-[var(--admin-canvas)]">
+				<div className="mx-auto flex min-h-screen w-full max-w-full min-w-0 flex-col lg:max-w-[75vw] lg:flex-row lg:border-x lg:shadow-xl border-[var(--admin-border)]">
+					{/* Mobile header */}
+					<div
+						className={`lg:hidden sticky top-0 flex items-center gap-3 px-4 py-3 border-b ${
+							open ? "z-30" : "z-50"
+						}`}
+						style={{
+							backgroundColor: "var(--admin-sidebar-background)",
+							borderColor: "var(--admin-border)",
+						}}
+					>
+						<button
+							type="button"
+							onClick={() => setOpen(!open)}
+							className="flex items-center justify-center w-9 h-9 rounded-lg
 						focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--admin-sidebar-background)]"
-					style={{ color: "var(--admin-sidebar-text-readable)" }}
-				>
-					{open ? <X size={18} /> : <Menu size={18} />}
-				</button>
-				<span
-					className="text-sm font-bold"
-					style={{ color: "var(--admin-sidebar-text-readable)" }}
-				>
-					Admin Panel
-				</span>
+							style={{ color: "var(--admin-sidebar-text-readable)" }}
+						>
+							{open ? <X size={18} /> : <Menu size={18} />}
+						</button>
+						<span
+							className="text-sm font-bold"
+							style={{ color: "var(--admin-sidebar-text-readable)" }}
+						>
+							Admin Panel
+						</span>
+					</div>
+
+					{/* Backdrop */}
+					{open && (
+						<div
+							className="fixed inset-0 z-40 lg:hidden"
+							onClick={() => setOpen(false)}
+							style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
+						/>
+					)}
+
+					{/* Sidebar */}
+					<div
+						className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
+							open ? "translate-x-0" : "-translate-x-full"
+						}`}
+						style={{ transition: "transform 300ms ease-in-out" }}
+					>
+						{sidebar}
+					</div>
+
+					{/* Content */}
+					<div className="flex flex-col flex-1 min-w-0">{children}</div>
+				</div>
 			</div>
-
-			{/* Backdrop */}
-			{open && (
-				<div
-					className="fixed inset-0 z-40 lg:hidden"
-					onClick={() => setOpen(false)}
-					style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-				/>
-			)}
-
-			{/* Sidebar */}
-			<div
-				className={`fixed inset-y-0 left-0 z-50 w-[260px] lg:!relative lg:!translate-x-0 lg:!min-h-screen ${
-					open ? "translate-x-0" : "-translate-x-full"
-				}`}
-				style={{ transition: "transform 300ms ease-in-out" }}
-			>
-				{sidebar}
-			</div>
-
-			{/* Content */}
-			<div className="flex flex-col flex-1 min-w-0">{children}</div>
-		</div>
 		</AdminMobileContext.Provider>
 	);
 }