From 7be8622e6fca6d2a93d365e8bd671c9aced56a32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?=
 <35082514+alezmad@users.noreply.github.com>
Date: Sun, 5 Apr 2026 16:16:40 +0100
Subject: [PATCH] fix(web): dashboard main content horizontal padding +
 max-width container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ScrollContainer — the wrapper under every dashboard/admin SidebarInset
— had zero horizontal padding on its scroll child, so pages rendered
edge-to-edge against the viewport. On wide screens content also
stretched to whatever width the sidebar left over (no max-width).

Single-point fix: wrap the scroll child in

  <div class="mx-auto w-full max-w-[var(--cm-max-w)] px-4 py-6 md:px-8 md:py-8">

Hits every route under SidebarInset in one change:
- /dashboard
- /dashboard/meshes + /new + /[id] + /[id]/invite + /[id]/live
- /dashboard/invites
- /dashboard/settings (+ billing, security)
- /admin + /admin/users, /organizations, /customers, /meshes,
  /sessions, /invites, /audit

px-4 → md:px-8 matches the marketing sections' gutter rhythm.
max-w-[var(--cm-max-w)] (90rem) caps content on ultra-wide.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/modules/common/layout/dashboard/scroll-container.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/modules/common/layout/dashboard/scroll-container.tsx b/apps/web/src/modules/common/layout/dashboard/scroll-container.tsx
index 7a0967f..a777580 100644
--- a/apps/web/src/modules/common/layout/dashboard/scroll-container.tsx
+++ b/apps/web/src/modules/common/layout/dashboard/scroll-container.tsx
@@ -53,7 +53,9 @@ export function ScrollContainer({ children, className }: ScrollContainerProps) {
         onScroll={updateScrollState}
         className="h-full overflow-auto"
       >
-        {children}
+        <div className="mx-auto w-full max-w-[var(--cm-max-w)] px-4 py-6 md:px-8 md:py-8">
+          {children}
+        </div>
       </div>
     </div>
   );