fix(views): wrap My Files table for mobile horizontal scroll #3

Merged
brendan merged 1 commits from chore/mobile-files-table-overflow into main 2026-05-04 00:15:22 +00:00
Owner

Summary

  • Fixes the My Files table overflowing the viewport on iPhone-class widths (~375 px), where the rightmost Copy/Delete column was clipped off-screen with no scroll affordance.
  • Wraps <table> in <div class="table-wrap"> with overflow-x: auto; moves the outer border from the table to the wrapper so desktop is visually unchanged.
  • Adds min-width: 100% on the table so it still fills wide viewports.
  • Extends the existing My Files integration test to assert class="table-wrap" is rendered.

Test plan

  • npm run build passes (tsc --noEmit, no errors).
  • npm test passes (107/107 green).
  • Visual sanity check on iOS Safari at 375 px and Android at 360 px after deploy — confirm horizontal scroll inside the table region only, Copy + Delete reachable.
  • Visual sanity check on desktop ≥1024 px — layout unchanged.

Resolves the bugs.md item dated 2026-05-03.

Dispatched by the bug-fixer role with autonomous self-review (verdict: MERGE).

## Summary - Fixes the My Files table overflowing the viewport on iPhone-class widths (~375 px), where the rightmost Copy/Delete column was clipped off-screen with no scroll affordance. - Wraps `<table>` in `<div class="table-wrap">` with `overflow-x: auto`; moves the outer border from the table to the wrapper so desktop is visually unchanged. - Adds `min-width: 100%` on the table so it still fills wide viewports. - Extends the existing My Files integration test to assert `class="table-wrap"` is rendered. ## Test plan - [x] `npm run build` passes (tsc --noEmit, no errors). - [x] `npm test` passes (107/107 green). - [ ] Visual sanity check on iOS Safari at 375 px and Android at 360 px after deploy — confirm horizontal scroll inside the table region only, Copy + Delete reachable. - [ ] Visual sanity check on desktop ≥1024 px — layout unchanged. Resolves the bugs.md item dated 2026-05-03. Dispatched by the bug-fixer role with autonomous self-review (verdict: MERGE).
brendan added 1 commit 2026-05-04 00:08:48 +00:00
The table at /files was wider than the viewport on iPhone-class widths
(~375 px) — the rightmost column with the Copy and Delete buttons clipped
off-screen with no scroll affordance. Wrapping the table in a
.table-wrap div with overflow-x: auto lets the table scroll within
itself; moving the outer border to the wrapper preserves the desktop
visual unchanged.

- public/style.css: add .table-wrap rule, move border off table, add
  min-width: 100% so the table still fills wide viewports.
- src/views/file-list.ts: wrap <table> in <div class="table-wrap">.
- tests/integration/pages.test.ts: assert rendered HTML contains
  class="table-wrap".
brendan merged commit 42a9530ed0 into main 2026-05-04 00:15:22 +00:00
Sign in to join this conversation.