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) intheme.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

Profile

Commit

Pull request

Workflow logs

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

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

Profile

Commit

Pull request

Workflow logs

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

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

Profile

Commit

Pull request

Workflow logs

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