thallada/the-daily-epub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Size the wide table wrapper to its table

Browse Source 
The wrapper spanned the whole wide track while the table sat centred inside
it, so the empty flanks were part of the scroll container and caught the
wheel. A centred grid item is sized fit-content, so the wrapper now hugs the
table; the page-column floor and viewport cap move onto the wrapper.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
thallada
2026-09-20 22:02:36 +00:00
co-authored by Claude Fable 5.1
parent 3c4f8de3a4
commit e5ca78ba41
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/static/app.css
+1 -1
View File
File diff suppressed because one or more lines are too long
src/web/tailwind.css
+6 -4
View File
@@ -234,13 +234,15 @@
/* Grid items never collapse margins, so a child's bottom margin (`.table-filter`, `.rating`) would add to
the next child's `mt-4`; the rhythm comes from top margins only. `!important` beats those utilities. */
.dashboard > * { grid-column:content; min-width:0; margin-bottom:0 !important; }
.dashboard > .scroll-x { grid-column:wide; }
.dashboard > .scroll-x > table {
width:auto;
/* The wrapper shrinks to its table (a centred grid item is sized fit-content), so the
flanks beside a narrow table stay page, not scroll container: wheeling there scrolls the page. */
.dashboard > .scroll-x {
grid-column:wide;
justify-self:center;
min-width:min(100%, calc(80rem - 2 * var(--gutter)));
max-width:100%;
margin-inline:auto;
}
.dashboard > .scroll-x > table { width:auto; min-width:100%; }
.dashboard > * + * { @apply mt-4; }
.dashboard h1 { @apply text-2xl font-semibold leading-tight tracking-[-0.01em]; }
.dashboard h2 { @apply text-lg font-semibold; }