Mobile: wide tables (file tree, keys) force page-level horizontal scroll instead of scrolling in place #275

New issue

Closed

opened 2026-09-10 11:18:30 +00:00 by crueber · 3 comments

crueber commented

2026-09-10 11:18:30 +00:00

Owner

What's wrong

At a phone viewport (390×844), wide content tables force the entire page to scroll horizontally instead of scrolling within their own container:

File tree (/:owner/:name/tree/…): the .data-table.tree-table measures 655px wide (THEAD right edge x=688) — the mode/size columns are fine on desktop but push the page to docW 530 vs 390 (+140px overflow). Users must pan the whole page sideways to read the tree, and the sticky header/tab bar don't follow meaningfully.
Keys page (/keys): the data-table measures 658px (right edge x=691) — same page-level overflow (docW 439, clipped by the header overflow from the sibling issue but the table alone exceeds 390).

Measured evidence

tree:  TABLE.data-table.tree-table  w:489 (table) / THEAD w:655 right:688; page docW 530 vs 390
keys:  TABLE.data-table             w:658 right:691

Root cause (code evidence)

web/css/repo.css:23 gives only .blob-cols an overflow: auto container. The tree table (web/src/pages/Tree.jsx, table.data-table.tree-table) and the keys table render in normal flow with no scroll wrapper, so their intrinsic width expands the page.
table.data-table columns (mode + size + message/date columns) don't shrink: fixed-ish content columns with no min-width strategy.

Fix direction

Wrap wide tables in a scroll container (overflow-x: auto on a parent div — the same treatment .blob-cols already gets) so the page itself never pans: tree table, keys table, and audit the other data-table uses (settings describe table, ops lists) for the same gap.
On narrow screens, drop or collapse low-value columns: the tree's mode column (drwxr-xr-x) is noise on mobile — hide below sm: or fold into the row meta.
Acceptance: at 390px, tree and keys pages have scrollWidth === clientWidth; the tables scroll within their containers; tree rows remain fully readable (name + size visible without panning).

## What's wrong At a phone viewport (390×844), wide content tables force the **entire page** to scroll horizontally instead of scrolling within their own container: - **File tree** (`/:owner/:name/tree/…`): the `.data-table.tree-table` measures **655px wide** (THEAD right edge x=688) — the mode/size columns are fine on desktop but push the page to `docW 530 vs 390` (+140px overflow). Users must pan the whole page sideways to read the tree, and the sticky header/tab bar don't follow meaningfully. - **Keys page** (`/keys`): the `data-table` measures **658px** (right edge x=691) — same page-level overflow (`docW 439`, clipped by the header overflow from the sibling issue but the table alone exceeds 390). ## Measured evidence ``` tree: TABLE.data-table.tree-table w:489 (table) / THEAD w:655 right:688; page docW 530 vs 390 keys: TABLE.data-table w:658 right:691 ``` ## Root cause (code evidence) - `web/css/repo.css:23` gives only `.blob-cols` an `overflow: auto` container. The tree table (`web/src/pages/Tree.jsx`, `table.data-table.tree-table`) and the keys table render in normal flow with no scroll wrapper, so their intrinsic width expands the page. - `table.data-table` columns (mode + size + message/date columns) don't shrink: fixed-ish content columns with no min-width strategy. ## Fix direction - Wrap wide tables in a scroll container (`overflow-x: auto` on a parent div — the same treatment `.blob-cols` already gets) so the page itself never pans: tree table, keys table, and audit the other `data-table` uses (settings describe table, ops lists) for the same gap. - On narrow screens, drop or collapse low-value columns: the tree's mode column (`drwxr-xr-x`) is noise on mobile — hide below `sm:` or fold into the row meta. - Acceptance: at 390px, tree and keys pages have `scrollWidth === clientWidth`; the tables scroll within their containers; tree rows remain fully readable (name + size visible without panning).

crueber referenced this issue from a commit

2026-09-10 12:11:22 +00:00

Fix #275: wide tables scroll in place (12_web_ui)

crueber referenced this issue from a pull request that will close it,

2026-09-10 12:11:25 +00:00

Fix #275: table scroll containers #282

crueber commented

2026-09-10 12:11:29 +00:00

Author

Owner

Fixed by PR #282 (branch fix/issue-275): overflow-x-auto scroll containers around the tree, setup-errors and API-routes tables; tree mode column hides below sm:; break-words hardening on trailer/effective-value cells; kv tables deliberately unwrapped (documented in 12_web_ui.md). node --test 548/548 green, vite build green. Browser proof at 390px still open.

crueber commented

2026-09-10 12:28:16 +00:00

Author

Owner

Review of PR #282 (fix/issue-275, 68948e1) — verified in scratch worktree /tmp/pr282 (removed afterward); main worktree left untouched.

COMPLETENESS (re-grepped data-table myself: 22 uses on main, all dispositioned): already wrapped — Settings tokens/dry-run/webhooks/strategies, Org members+invites, Access bindings+collabs, Release assets, Wal x4, Keys. Newly wrapped by this PR — Tree.jsx:251, Setup.jsx:261 errors, Apidocs.jsx:122 routes. Deliberately unwrapped — Settings placement/effective/mirror kv, Apidocs discovery (2-col label/value, wraps naturally, no nowrap rule outside overflow-x-auto), Commit trailers-table (break-words instead). No missed unwrapped non-kv table. Non-data-table tables (DiffTable diff, Blob blob-table) out of the 22-use scope and already have own scroll containment (blob-cols overflow-x-auto, .code-view).

WRAPPER CORRECTNESS: all three new div.overflow-x-auto sit on width-constrained block chains (main max-w-6xl > block page div > block card/tree-page; scroll container reports min-content 0 so it caps at parent and scrolls). No row-direction flex ancestor without min-w-0 in any chain; identical pattern to the 15 pre-existing wrappers on the same chains.

MODE COLUMN: hidden sm:table-cell touches only the entry-mode td; entry-icon td untouched, folder/link/file icons render on phones — kind is carried. Date column untouched (#211 intact).

KV RATIONALE SOUND: break-words on effective-values value td (Settings.jsx) + trailer-value td (Commit.jsx); neither is inside overflow-x-auto so the ui.css nowrap rule does not apply, and overflow-wrap gives unbreakable strings wrap opportunities. (Pre-existing note: Wal.jsx KV helper is a wrapped kv — consistent with the doc rationale for not newly wrapping; no action.)

LAWS: 1 no new deps (6 files, no package.json/lock); 7 n/a (markup only); 8 no seam changes; 12 doc decision appended in same commit.

TESTS (scratch): vite build green (2.1s; chunk-size warning pre-existing). node --test: full run 475 pass + 8 files erroring on ERR_MODULE_NOT_FOUND solid-js — my harness artifact (suite started before the node_modules symlink existed), NOT a PR failure. Re-ran those 8 files: 73/73 pass. Total 548/548, matching the doc claim. No new test file — acceptable: pure-markup change, node harness cannot render JSX; the grep audit above is the cover. No code fix needed, nothing pushed.

NO BROWSER CHECK per review instructions (node tests + reasoning only); browser proof stays open as the doc entry states.

MERGE RECOMMENDATION: ready to merge.

Review of PR #282 (fix/issue-275, 68948e1) — verified in scratch worktree /tmp/pr282 (removed afterward); main worktree left untouched. COMPLETENESS (re-grepped data-table myself: 22 uses on main, all dispositioned): already wrapped — Settings tokens/dry-run/webhooks/strategies, Org members+invites, Access bindings+collabs, Release assets, Wal x4, Keys. Newly wrapped by this PR — Tree.jsx:251, Setup.jsx:261 errors, Apidocs.jsx:122 routes. Deliberately unwrapped — Settings placement/effective/mirror kv, Apidocs discovery (2-col label/value, wraps naturally, no nowrap rule outside overflow-x-auto), Commit trailers-table (break-words instead). No missed unwrapped non-kv table. Non-data-table tables (DiffTable diff, Blob blob-table) out of the 22-use scope and already have own scroll containment (blob-cols overflow-x-auto, .code-view). WRAPPER CORRECTNESS: all three new div.overflow-x-auto sit on width-constrained block chains (main max-w-6xl > block page div > block card/tree-page; scroll container reports min-content 0 so it caps at parent and scrolls). No row-direction flex ancestor without min-w-0 in any chain; identical pattern to the 15 pre-existing wrappers on the same chains. MODE COLUMN: hidden sm:table-cell touches only the entry-mode td; entry-icon td untouched, folder/link/file icons render on phones — kind is carried. Date column untouched (#211 intact). KV RATIONALE SOUND: break-words on effective-values value td (Settings.jsx) + trailer-value td (Commit.jsx); neither is inside overflow-x-auto so the ui.css nowrap rule does not apply, and overflow-wrap gives unbreakable strings wrap opportunities. (Pre-existing note: Wal.jsx KV helper is a wrapped kv — consistent with the doc rationale for not newly wrapping; no action.) LAWS: 1 no new deps (6 files, no package.json/lock); 7 n/a (markup only); 8 no seam changes; 12 doc decision appended in same commit. TESTS (scratch): vite build green (2.1s; chunk-size warning pre-existing). node --test: full run 475 pass + 8 files erroring on ERR_MODULE_NOT_FOUND solid-js — my harness artifact (suite started before the node_modules symlink existed), NOT a PR failure. Re-ran those 8 files: 73/73 pass. Total 548/548, matching the doc claim. No new test file — acceptable: pure-markup change, node harness cannot render JSX; the grep audit above is the cover. No code fix needed, nothing pushed. NO BROWSER CHECK per review instructions (node tests + reasoning only); browser proof stays open as the doc entry states. MERGE RECOMMENDATION: ready to merge.

crueber closed this issue

2026-09-10 12:29:28 +00:00

crueber referenced this issue from a commit

2026-09-10 12:29:28 +00:00

Merge pull request 'Fix #275: table scroll containers' (#282) from fix/issue-275 into main

crueber commented

2026-09-10 12:29:28 +00:00

Author

Owner

Fixed by PR #282 (review: all 22 table uses dispositioned, wrappers constrained; 548/548), merged. Closing.

crueber added the

git storage