Tables force the whole page to scroll sideways on narrow viewports #69

New issue

Closed

opened 2026-08-12 14:16:23 +00:00 by a73x · 0 comments

a73x commented

2026-08-12 14:16:23 +00:00

(Migrated from git.a73x.sh)

Found by an actual browser pass at 480px wide (Chrome DevTools MCP), which is what 5c62b43b existed to do.

/git-collab/patches?filter=all at 500px viewport:
  documentElement.scrollWidth = 842
  window.innerWidth           = 500
  pageScrollsSideways         = true
  table.parentElement overflow-x = "visible"

The Branch and Updated columns are pushed off-screen and the body itself scrolls horizontally, which is the thing a page must never do.

Diffs get this right and tables do not. pre blocks carry overflow-x: auto, so a wide diff scrolls inside its own block — verified on /git-collab/diff/15a970d1 at the same width: pageScrollsSideways = false with a 1231px-wide pre. Tables have no equivalent wrapper, and table { width: 100% } plus seven columns exceeds the viewport.

Fix: wrap every table in a container with overflow-x: auto, same as pre already has. Affects the patches, issues, commits and releases lists.

No test could have caught this: the HTML is well-formed and every assertion about content passes. It only shows up when something renders at a width.

Migrated from git-collab issue 8e71647105f3f0ae4cc6ea5986c1c9850374f88b.

Original author: a73x dev@a73x.sh.

Close reason: merged in patch 34cf3f37

Found by an actual browser pass at 480px wide (Chrome DevTools MCP), which is what 5c62b43b existed to do. ``` /git-collab/patches?filter=all at 500px viewport: documentElement.scrollWidth = 842 window.innerWidth = 500 pageScrollsSideways = true table.parentElement overflow-x = "visible" ``` The Branch and Updated columns are pushed off-screen and the body itself scrolls horizontally, which is the thing a page must never do. **Diffs get this right and tables do not.** `pre` blocks carry `overflow-x: auto`, so a wide diff scrolls inside its own block — verified on `/git-collab/diff/15a970d1` at the same width: `pageScrollsSideways = false` with a 1231px-wide `pre`. Tables have no equivalent wrapper, and `table { width: 100% }` plus seven columns exceeds the viewport. Fix: wrap every table in a container with `overflow-x: auto`, same as `pre` already has. Affects the patches, issues, commits and releases lists. No test could have caught this: the HTML is well-formed and every assertion about content passes. It only shows up when something renders at a width. --- Migrated from git-collab issue `8e71647105f3f0ae4cc6ea5986c1c9850374f88b`. Original author: a73x <dev@a73x.sh>. Close reason: merged in patch 34cf3f37