From b004372e48abe45b424d8f1ecb13eb68e5eb1a14 Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Fri, 2 Oct 2026 01:59:46 +0300
Subject: [PATCH] fix: keep the page gutter beside the sidebar

With a sidebar, the main element was also the flex item that filled the row, so flex-1 replaced
the shell width and the page lost its side margins on phones and next to the sidebar on desktop.
The row's flex item is now a wrapper, and main keeps the shell width and margins.
---
 src/components/AppShell.tsx | 8 +++++---
 test/workspace.spec.tsx     | 5 ++++-
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 0a0cd6e..b806c0b 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -67,9 +67,11 @@ export function AppShell({
       {sidebar ? (
         <div className="flex flex-1">
           <aside className="sidebar-panel hidden md:block">{sidebar}</aside>
-          <main className="shell min-w-0 flex-1 py-8 sm:py-14" id="content">
-            {children}
-          </main>
+          <div className="min-w-0 flex-1">
+            <main className="shell py-8 sm:py-14" id="content">
+              {children}
+            </main>
+          </div>
         </div>
       ) : (
         <main className="shell flex-1 py-8 sm:py-14" id="content">
diff --git a/test/workspace.spec.tsx b/test/workspace.spec.tsx
index f54214b..c3eb86b 100644
--- a/test/workspace.spec.tsx
+++ b/test/workspace.spec.tsx
@@ -98,7 +98,10 @@ describe('Sidebar and AppShell', () => {
     const sidebar = container.querySelector('aside nav[aria-label="Areas"]')!;
     expect(sidebar.querySelector('[aria-current="page"]')?.textContent).toBe('Home');
     expect(sidebar.textContent).toContain('99+');
-    expect(container.querySelector('aside + main#content')?.textContent).toBe('Page');
+    const main = container.querySelector('aside + div > main#content')!;
+    expect(main.textContent).toBe('Page');
+    expect(main.classList.contains('shell')).toBe(true);
+    expect(main.classList.contains('flex-1')).toBe(false);
   });
 });