hotel-manage-stack/room-planner
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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>
This commit is contained in:
jtricerolph 2026-07-04 11:34:30 +00:00
parent b66b3a7854
commit cbfec7d591
1 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/Layout.tsx
View file

@ -32,7 +32,8 @@ export default function Layout({ children }: { children: React.ReactNode }) {
<div className="sidebar-user">{user.name}</div> <div className="sidebar-user">{user.name}</div>
</aside> </aside>
{/* Mobile top bar */} <main className="page-content">
{/* Mobile top bar — lives inside page-content so it stacks above content */}
<header className="top-bar"> <header className="top-bar">
<BedDouble size={18} strokeWidth={1.75} color="var(--gold)" /> <BedDouble size={18} strokeWidth={1.75} color="var(--gold)" />
<span className="top-bar-title">Room Planner</span> <span className="top-bar-title">Room Planner</span>
@ -48,7 +49,6 @@ export default function Layout({ children }: { children: React.ReactNode }) {
</nav> </nav>
</header> </header>
<main className="page-content">
{children} {children}
</main> </main>
</div> </div>