web: the desktop layout !436

merged merged by cmc on 2026-09-19 23:21 UTC · krz/gitbay:desktop-layout-spec into main

Discussion

cmc

Ref #226. Spec docs/specs/2026-09-19-desktop-layout-design.md, plan docs/plans/2026-09-19-desktop-layout.md.

The phone layout landed in v1.23.0 through v1.29.0; this is the desktop half. Measured at 1600 and 1920 wide, the old layout put every page in the top-left corner: nothing centred, nothing grew past its cap, and the lists were laid out as prose.

What changes:

  • One centred container at 100rem. The repository header's inner content, main and the footer share it, so all three align at every width. reading and bounded stay as centred caps inside it.
  • The repository header is two rows: owner/name with the description, topics and website inline, the Pin/Watch/Bookmark/Fork buttons at the right, then the tabs. The toggles hint is title text on the buttons.
  • Issue, merge request, build, explore, search and notification rows are one line above 62rem, and those pages render at the container width.
  • The dashboard is three columns: pinned repositories with open issue, merge request and last-build counts; a tile per queue with the queue rows below; the activity feed as a sticky aside.
  • A file navigator beside blob, blame and edit lists the file's directory and marks the file.
  • Side columns carrying what each page already accepts as parameters: state, labels and open milestones on the issue and merge request lists; status, jobs and branches on builds; topics on explore; kinds on search; sections on repository settings, account settings and admin.
  • Below 62rem the facet and section columns stack after their content and the navigator hides, since the tree page is the navigator on a phone. Below 80rem the pinned repositories return to a chip row.

No new control command and no migration: every read is a store query or a gitutil call that already existed. railFor lost its pinned loop, so every signed-in page drops one query plus one per pinned repository. Facet counts span only what the viewer can read, through control.ReadableScope.

Verification: unit tests for the container, header, widths, facets, topics, file navigator and dashboard tiles; e2e coverage for the navigator on blob, blame and edit, the facet column on the issue and merge request lists, and the dashboard's tiles. Captures at 1920, 1280 and 375 in both schemes were inspected page by page; no page scrolls horizontally at 375. An axe scan reported three findings, all reproduced on deployed main, so none is a regression here.

A whole-branch review caught three defects the per-task reviews could not see, all fixed in this branch: sticky columns had no overflow-y, so a directory with more entries than fit the viewport had an unreachable tail; the row metadata kept white-space: nowrap below 62rem, which would have reintroduced horizontal scrolling on a phone; and the pinned column reported build state by colour alone, the same defect class #232 fixed for links.

Follow-ups worth filing after this merges: the activity feed's dots share that colour-only problem and paint a cancelled build with the pending orange; a label facet counts across every readable repository in an org while its link narrows one repository, and a milestone facet counts issues and merge requests together on both lists; and the three pre-existing axe findings on deployed main (the blob path-bar crumb and the notifications empty-state link fail link-in-text-block, and the account key tables carry an empty table header).