Mobile / phone experience pass for the web UI #389
Labels
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference: Cordy/Cairn#389
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Split out of the #315 owner-column round (2026-09-01) at Nikola's request — deliberately its own issue so a phone pass cannot accidentally break the settled desktop UI.
What already exists
The UI is not unresponsive today: the file list is a CSS container (
container-name:list) with breakpoints at 820px (drop Modified), 560px (drop Size + Owner) and 400px; the sidebar collapses to icons at 700px and disappears into a single-column layout at 820px; several admin surfaces have their own 640–860px media rules; the brand tag hides at 900px. So a phone renders something usable — but nobody has actually designed for it.Scope of the pass
min(600px, 92vw)is fine; audit the rest) and long forms (share, members, retention picker) need a scroll/keyboard story.Definition of done
A phone user can browse, preview, upload, share, restore from trash and read notifications comfortably; anything deliberately desktop-only (e.g. deep admin) degrades to a readable, honest layout instead of a broken one; the desktop UI is untouched at ≥820px.
Recon + plan (2026-09-13). Mockup rev 1 delivered to Nikola (
mobile-389-mockup.html, 9 variants, every surface at 390px). Note the surface list has grown since this issue was written: the pass now also covers the #484–509 toolbar/tiles/selection/pagination work and the #486 New menu + editor page.The headline finding: at ≤820px the sidebar is
display:nonewith no replacement (@media(max-width:820px){#app{grid-template-columns:1fr} #app > aside{display:none}}). A phone user cannot reach Recents, Favourites, Spaces, Shares, Transfers, Trash or Admin at all. Everything else is degradation; this is absence.Full defect inventory from the recon
100vhin five places (app shell, aside, pvpanel, divider) — iOS URL-bar collapse territory; zerosafe-area-insetusage anywhere.min(30rem, 92vw)base) but there is no max-height/scroll/keyboard story, and sub-16px inputs trigger iOS focus zoom.Decisions taken (Nikola, 2026-09-13)
#admin/<topic>deep links keep working.Other design calls in the mockup (rev 1)
.menu/.fbpoppopovers become bottom sheets at ≤480px via ONE shared mechanism, not per-menu forks.The contract
Pitfalls carried into the build
#fileactions-scoped ID-specificity CSS (the #485 lesson) applies to every toolbar override; sheet CSS must not leak into.menudesktop styling — the sheet mode is a body-class gate, not a.menurewrite.setView/openAdminrouting — the highest-regression-risk JS in the pass; each wave ships alone and gets the desktop diff.Build order (each wave its own release, dogfood-verified at 390×844 + desktop-diffed): A shell (tab bar, More/bell/avatar sheets, search row, dvh/safe-area plumbing) → B list & actions (row recipe, kebab/New/sort/gear sheets, selection action bar, tiles) → C layers (preview takeover, dialog cards, folder picker) → D admin drill-in + desktop cards + editor bar. Build starts on mockup approval.
Mobile pass shipped — v0.6.180 → v0.6.183, all four waves live on both dogfoods
Implemented exactly per the approved mockup and the three recorded decisions (bottom tab bar; star + kebab rows with bottom-sheet menus; functional admin with 3 desktop-only ceremonies).
Wave A — shell (v0.6.180, PR #520): bottom tab bar (Personal, Recents, Favourites, Spaces, More) ≤819px — the sidebar was
display:nonebelow 820px with no replacement. More sheet carries Shares/Transfers/Federated/Deleted files/Administration under their existing visibility rules with the Transfers dot. At ≤480px every.menu/.fbpoppopover becomes a bottom sheet (grabber, scrim viabody:has, 46px rows, safe-area padding) and search collapses to a magnifier that expands to a full-width 16px-input row.Wave B — list & actions (v0.6.181, PR #521): phone rows carry
size · datein the subtitle, actions reduce to star + kebab at 44px, kebab and space sheets open with an identity header, selection swaps the tab bar for a bottom action bar (the real#sel-*buttons DOM-moved, width-gated, reversible on resize), 2-column tiles, compact toolbar.Wave C — layers (v0.6.182, PR #522): preview is a full takeover ≤480 (over the top bar, tab bar hidden while open) with the system back gesture closing it via one pushed history entry, and horizontal swipe stepping siblings like ArrowUp/Down. Dialogs become bottom cards (90dvh, sticky actions, 16px inputs); the audit picker becomes a sheet.
Wave D — admin + editor (v0.6.183, PR #523): Administration was unreachable below 820px (the rail lives in the hidden sidebar) — phones now get a topic-list drill-in proxying the real rail buttons, with a back affordance, and the tab bar stays visible in admin (tab taps close admin first, so dirty-revert runs). The three ceremonies — audit leak tracing, key rotation/drain, peering key exchange — carry an advisory desk card in en/de-CH/fr/it; nothing is gated. Editor bar ≤480: 44px, icon-only back, no path/app tag; the read-only chip never degrades.
Desktop invariant, enforced by construction: each wave's one-shot ran a fence gate over all six
<style>blocks asserting the only phone selectors outside@media (max-width:…)blocks are the threedisplay:nonebase lines (#searchtoggle, #searchcancel, #tabbar/.n2ph, .shhead, #selbot/#admtopics, #admback, .deskcard), plusnode --checkon every inline script block. All injected JS is width-gated or CSS-hidden at ≥820px.Out of scope as agreed: long-press selection, PWA/manifest, pull-to-refresh; desktop-only: drag-drop move, preview divider, density setting.
Remaining before close: the real-phone pass — Safari iOS + Android Chrome on files/files-bao: tab bar + More sheet, sheets/scrim, search expand, row kebab header, selection bottom bar, preview takeover + back gesture + swipe, a dialog (rename), admin drill-in + a save bar, and opening a document in the editor. I can't log in to the dogfoods, so everything above is verified structurally; the visual pass is yours.