From cbfec7d59161d642b99b01f13db35230a777e966 Mon Sep 17 00:00:00 2001
From: jtricerolph <info@tricerolph.com>
Date: Sat, 4 Jul 2026 11:34:30 +0000
Subject: [PATCH] =?UTF-8?q?Room=20planner:=20fix=20mobile=20layout=20?=
 =?UTF-8?q?=E2=80=94=20move=20top-bar=20inside=20page-content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

top-bar was a sibling of page-content in the flex-row app-shell, so on
mobile it sat in the left column instead of spanning the top. Moving it
inside page-content (a flex column) makes it stack above the content on
mobile while remaining hidden on desktop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/Layout.tsx | 32 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index a434111..d067760 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -32,23 +32,23 @@ export default function Layout({ children }: { children: React.ReactNode }) {
         <div className="sidebar-user">{user.name}</div>
       </aside>
 
-      {/* Mobile top bar */}
-      <header className="top-bar">
-        <BedDouble size={18} strokeWidth={1.75} color="var(--gold)" />
-        <span className="top-bar-title">Room Planner</span>
-        <nav className="top-bar-nav">
-          <NavLink to="/planner" className={({ isActive }) => isActive ? 'active' : ''}>
-            Planner
-          </NavLink>
-          {hasCap('settings') && (
-            <NavLink to="/settings" className={({ isActive }) => isActive ? 'active' : ''}>
-              Settings
-            </NavLink>
-          )}
-        </nav>
-      </header>
-
       <main className="page-content">
+        {/* Mobile top bar — lives inside page-content so it stacks above content */}
+        <header className="top-bar">
+          <BedDouble size={18} strokeWidth={1.75} color="var(--gold)" />
+          <span className="top-bar-title">Room Planner</span>
+          <nav className="top-bar-nav">
+            <NavLink to="/planner" className={({ isActive }) => isActive ? 'active' : ''}>
+              Planner
+            </NavLink>
+            {hasCap('settings') && (
+              <NavLink to="/settings" className={({ isActive }) => isActive ? 'active' : ''}>
+                Settings
+              </NavLink>
+            )}
+          </nav>
+        </header>
+
         {children}
       </main>
     </div>