Room planner: fix mobile layout — move top-bar inside page-content

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,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>