← Dev log
EduQate·frontend·2026-08-20

Three apps with no mobile layout, one with no nav

A fixed w-[260px] sidebar with no breakpoint squeezed main to 130px at 390px wide, rendering page titles one glyph per line.

Only visible by using it

Invisible to a code read. Found by being the real user, on a real device, at a real width.

The complaint was that the app was "very messy" on a phone. Measured at 390px:

Admin and super-admin had <aside> at w-[260px] flex-shrink-0 with no breakpoint, squeezing main to 130px. Page titles rendered one glyph per line, vertically; list-item text measured clientWidth: 0. Customer web logged in had exactly one <a href> on the whole page — no Dashboard, Children, Documents, Messages, Interviews, Profile or Settings reachable at all, because the entire nav lived in a lg:block sidebar with no mobile equivalent. Logged out, the header ran 32px off-screen at 360 and 390. And the toast container was fixed top-4 right-4 w-[min(100vw-2rem,42rem)], so at 390px the viewport branch wins and every toast was full-width across the page header.

Ruled out first so nobody re-flags it: the viewport <meta> is correct in all three index.html files. This was real layout breakage.

The uncomfortable part is that every one of these is visible by resizing a browser window, and the app had been through multiple design sweeps without anyone doing it.