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".
Removes the IBM Plex Mono Google Fonts @import, replaces the --font CSS
variable with a cross-platform system sans-serif stack, and adds a
--font-mono variable for the share-URL readonly input so copy/share text
stays monospace. Also adds line-height: 1.5 to body to compensate for
the system fonts' tighter default leading.
No font asset files exist in /public; layout.ts has no font <link> tags
to remove. Acceptance check: build + 112 tests pass; new
tests/integration/style.test.ts asserts no @import / IBM Plex / external
font URL remains and that the system stack is wired up.
- IBM Plex Mono font from Google Fonts for the monospace character
- Pure black/white/gray palette — no colors except red for errors/danger
- 1px solid black borders system throughout (no shadows, no rounding)
- Header nav uses border-left separators with hover backgrounds
- Primary button: solid black; copy button: white outline (visually distinct)
- Share box: readonly input + copy button flush with no gap
- Table: outer border + gray header row + subtle row hover
- File view: centered with border around video/audio players
- Danger button: red outline, fills on hover
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
