Monorepo for Tangled tangled.org

web: cap every page at 80rem on desktops, keep laptop widths #4709

Open eti.tf
targeting master from eti/repo-page-width
Open opened by and assigned to eti.tf
targeting master from eti/repo-page-width

Pages on Tangled don't share a width. Commit, pull and workflow log pages fill the whole screen, other repo pages sit in a 64rem column, and settings is 75rem. On a big monitor the full-width pages get hard to read, and on an ultrawide screen the topbar's logo and buttons sit at the far edges, nowhere near the content.

This sets one rule based on the size of the window:

  • Laptops (windows narrower than 1792px, which covers every MacBook at its default scaling, including the 16" at 1728px): pages keep the widths they have today. Regular pages use the 64rem column (settings stays at 75rem), and pull request, commit and workflow log pages fill the window.
  • Desktops (1792px and wider): every page uses the same 80rem column, and the topbar's logo and buttons line up with it.

Smaller changes along the way:

  • Images and videos in ticket bodies are capped at 48rem, so a big screenshot doesn't stretch across the whole column.
  • The pull page discussion panel gets a border on all sides.
  • The repo tabs get the same spacing under the header on every page.
  • The 1792px switch is a new desktop: breakpoint (112rem) in theme.css.

Things I'd like feedback on:

  • Is 1792px the right place for the switch? Just past it, pull, commit and workflow pages drop from almost the full window to 1280px.
  • Is 80rem the right width for desktops?
  • Does the 48rem cap on ticket images look right?

Screenshots, before on the left and after on the right.

13" MacBook Pro at its default scaling (looks like 1440 × 900, 2x) #

Repo overview

Repo overview, before and after

Profile

Profile, before and after

Commit

Commit, before and after

Pull request

Pull request, before and after

Workflow logs

Workflow logs, before and after

Images in ticket bodies (this PR's own description)

Images in ticket bodies (this PR's own description), before and after

27" 4K monitor at 150% scaling (looks like 2560 × 1440, 1.5x) #

Repo overview

Repo overview, before and after

Profile

Profile, before and after

Commit

Commit, before and after

Pull request

Pull request, before and after

Workflow logs

Workflow logs, before and after

Images in ticket bodies (this PR's own description)

Images in ticket bodies (this PR's own description), before and after

34" 21:9 ultrawide at 100% (3440 × 1440, 1x) #

Repo overview

Repo overview, before and after

Profile

Profile, before and after

Commit

Commit, before and after

Pull request

Pull request, before and after

Workflow logs

Workflow logs, before and after

Images in ticket bodies (this PR's own description)

Images in ticket bodies (this PR's own description), before and after

Commits 0