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

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".
This commit is contained in:
2026-05-03 17:06:14 -07:00
parent bbd292c085
commit d9592100cc
3 changed files with 18 additions and 9 deletions

View File

@@ -309,10 +309,16 @@ h1 + p {
font-size: 12px; font-size: 12px;
} }
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: var(--border);
}
table { table {
width: 100%; width: 100%;
min-width: 100%;
border-collapse: collapse; border-collapse: collapse;
border: var(--border);
} }
th { th {

View File

@@ -24,6 +24,7 @@ export function fileListPage(files: FileRow[], baseUrl: string): string {
return layout('My files', ` return layout('My files', `
<h1>My files</h1> <h1>My files</h1>
<p><a href="/upload">Upload new file</a></p> <p><a href="/upload">Upload new file</a></p>
<div class="table-wrap">
<table> <table>
<thead> <thead>
<tr> <tr>
@@ -32,6 +33,7 @@ export function fileListPage(files: FileRow[], baseUrl: string): string {
</thead> </thead>
<tbody>${rows}</tbody> <tbody>${rows}</tbody>
</table> </table>
</div>
`, { authed: true }); `, { authed: true });
} }

View File

@@ -223,6 +223,7 @@ describe('GET /files — copy link', () => {
const res = await ctx.app.inject({ method: 'GET', url: '/files', cookies: { token } }); const res = await ctx.app.inject({ method: 'GET', url: '/files', cookies: { token } });
expect(res.statusCode).toBe(200); expect(res.statusCode).toBe(200);
expect(res.body).toContain('Copy link'); expect(res.body).toContain('Copy link');
expect(res.body).toContain('class="table-wrap"');
}); });
}); });