The mobile bottom bar rendered all 15 routes into a single row. On a
390px iPhone that works out at ~17px per tab: the icons overlap, every
label truncates to a single letter and the tap targets sit far below
the 44px minimum, so the tabs could not be read or hit reliably.
Mobile now uses a hamburger in the header that opens a full-screen menu
listing every section, grouped (Main / CIPC & BizPortal / SARS /
Practice). The panel locks background scroll, closes on Escape or on
navigation, and carries the theme toggle so the mobile chrome keeps
parity with the desktop cluster.
Desktop had the same problem in a different shape. The full 15-link row
needed 1752px inside a 1280px container, so the page scrolled sideways
even at 1920px (measured scrollWidth 2065 vs a 1920 viewport) and the
right-hand cluster was pushed off screen. The inline nav now carries
six primary links plus a "More" dropdown, which fits exactly.
- NavBar: mobile tab bar replaced by the header menu panel; desktop nav
reduced to primary links + More dropdown; grouped list shared by both
so the two surfaces cannot drift apart.
- RouteChrome: dropped the pb-24 md:pb-0 padding that only existed to
clear the old bottom bar.
- .gitignore / Workflow/.dockerignore: ignore .next-stale* so a stale
build directory cannot bloat the Docker build context.
- add .dockerignore: without it the build context shipped .env.local
(PB_TOKEN + CIPC passwords), node_modules and the full .git history
- bake NEXT_PUBLIC_PB_URL / NEXT_PUBLIC_BASE_URL / NEXT_PUBLIC_APP_URL
as build args; NEXT_PUBLIC_PB_URL was read by client components but
never supplied, so browser-side PocketBase calls would break
- docker-compose: same build args + Telegram runtime env
- document that agent-browser / PDFD sidecar routes stay on the PC