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:
thalladaandClaude Fable 5.1 committed 2026-09-20 22:02:36 +00:00
1 parent 3c4f8de3a4
commit e5ca78ba41
2 files changed
+7 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

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; }