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

brendan · 2026-05-04T00:08:48Z

brendan commented

2026-05-04 00:08:48 +00:00

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

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

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

brendan referenced this issue from a commit

2026-05-04 00:15:23 +00:00

Merge pull request 'fix(views): wrap My Files table for mobile horizontal scroll' (#3) from chore/mobile-files-table-overflow into main

brendan referenced this pull request

2026-05-09 17:34:10 +00:00

feat: persistent session cookies (30d sliding) — nanodrop tier #4

brendan referenced this pull request

2026-05-13 19:01:36 +00:00

deploy CI fails on `npm ci` resolving `bchen-sqlite-migrate@git+https://...` #11

brendan referenced this pull request