On your phone
The office works the same on a phone, but how you reach things changes. There is no separate version of the application: it is the same one, with two drawers and the tables turned into cards.
The menu, in a drawer
Section titled “The menu, in a drawer”On a wide screen the menu is always on the left. Below 820 px it does not disappear: it is kept in a drawer that opens with the hamburger in the top bar.
- It opens and closes with the hamburger, with the cross inside the drawer, or by tapping the dark background.
- Picking a view closes the drawer on its own, even if you pick the view you were already on.
- Inside the drawer the menu is always shown in full: collapsing to 58 px makes no sense there.
The signature panel, in another drawer
Section titled “The signature panel, in another drawer”The right-hand panel (what waits for your signature) slides in from the right with its own button, and it also closes when you tap outside. It appears from 1180 px downwards, because from there up it no longer fits next to the content.
Tables, as cards
Section titled “Tables, as cards”An eight-column table at 390 px leaves the amounts off screen: you had to drag sideways to see the figure that matters. Below 820 px each row becomes a card:
┌────────────────────────────────┐│ Juan Gómez ││ Technical Director ││ Department technology ││ Model deepseek-v4.1-… ││ Usage this month ▓▓░ 2.9 % ││ Assigned 20.00 € ││ Remaining 19.42 € ││ Tokens 1,603,448 ││ [ Limits ] │└────────────────────────────────┘The label on each line comes from the table header, so if a column changes tomorrow the card
changes with it without touching anything (web/src/tablas.ts).
Details you do not see but do notice
Section titled “Details you do not see but do notice”- Buttons reach 38-40 px high: below that, the finger misses.
- Form fields go to 16 px, which is what stops the phone’s browser from zooming in on its own when you focus a field.
- The small print on figures goes up to 13 px on a narrow screen: that is where you look at the number.
- Nothing in the application scrolls horizontally: if something does not fit, it becomes a card or keeps its own scroll inside its block.