Roadmap
The problem
Every screen was laid out at a desktop width and never revisited at a narrow one. #28 already noted that its footer work left the centred pages provisional and that "the planned responsive pass will revisit it" — this is that pass, and the list turned out to be longer than a header fix.
What actually breaks on a 375 px screen:
- The header overflows. Six labelled controls sit on one row — GitHub, Documentation, a language
USelect pinned to w-28, the colour-mode toggle, the account button and Log out. They need roughly 430 px of the 343 px available.
- List actions fall off the row. The dashboard and the users, allowed-IP, banned-IP and invitation screens all use
flex items-center justify-between around a badge row that cannot wrap. Four badges push the delete button past the edge.
- The create form squeezes its own output. The result link and its copy button share a row, which leaves a handful of characters visible in the field — on the one screen whose whole purpose is handing over a URL. The expiry and max-reads fields are locked to
grid-cols-2.
- The account screen puts a password field next to its button in three places, so neither is usable.
- The storage report lets the figure shrink instead of the label, so a quota reads as
12.3 … next to a label with room to spare.
- The legal editor puts two tab groups on one row, which truncates every label, and sizes both panes off the viewport for a side-by-side layout that only exists from
lg up.
- iOS zooms the page on every focus. Nuxt UI fields are 14 px and Safari zooms below 16 px, so tapping any field on an iPhone rescales the whole page and leaves it there.
- Long unbroken strings do not wrap — a revealed secret is often one token, and so is the TOTP secret on the account screen.
Two navigation problems surfaced while going through the screens, and they are not width-dependent:
/login, /register and /p/:id have no way back to the home page. Every other screen carries a return link; these three are dead ends.- Signing up is only reachable from inside the login page. Somebody with no account has to guess that the way in is behind a button labelled for people who already have one.
What you have in mind
A pass over every screen rather than a mobile stylesheet: the same markup, given the breakpoints it should have had.
Labels collapse to their icons below sm where the icon carries the meaning, and the language select becomes a dropdown so its trigger can do the same. Rows that hold an action wrap instead of pushing it off screen, and the figure in a caption stops shrinking. Fields are forced to 16 px on touch pointers so Safari stops zooming.
The ten identical back buttons become one component, so the rule about when the label shows lives in one place — and /login, /register and /p/:id get it too.
The account button becomes a menu carrying the account, the paste list and, for an admin, the instance settings. That empties the shortcut rows that pages were carrying in their own headers, which is what crowds a phone title most. Signing up then gets its own header button beside signing in, shown only when registration is open so it is never a dead end.
Roadmap
The problem
Every screen was laid out at a desktop width and never revisited at a narrow one. #28 already noted that its footer work left the centred pages provisional and that "the planned responsive pass will revisit it" — this is that pass, and the list turned out to be longer than a header fix.
What actually breaks on a 375 px screen:
USelectpinned tow-28, the colour-mode toggle, the account button and Log out. They need roughly 430 px of the 343 px available.flex items-center justify-betweenaround a badge row that cannot wrap. Four badges push the delete button past the edge.grid-cols-2.12.3 …next to a label with room to spare.lgup.Two navigation problems surfaced while going through the screens, and they are not width-dependent:
/login,/registerand/p/:idhave no way back to the home page. Every other screen carries a return link; these three are dead ends.What you have in mind
A pass over every screen rather than a mobile stylesheet: the same markup, given the breakpoints it should have had.
Labels collapse to their icons below
smwhere the icon carries the meaning, and the language select becomes a dropdown so its trigger can do the same. Rows that hold an action wrap instead of pushing it off screen, and the figure in a caption stops shrinking. Fields are forced to 16 px on touch pointers so Safari stops zooming.The ten identical back buttons become one component, so the rule about when the label shows lives in one place — and
/login,/registerand/p/:idget it too.The account button becomes a menu carrying the account, the paste list and, for an admin, the instance settings. That empties the shortcut rows that pages were carrying in their own headers, which is what crowds a phone title most. Signing up then gets its own header button beside signing in, shown only when registration is open so it is never a dead end.