justinzeus/spreadlab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: widen Method page and clear its table scrollbar

Browse source 
Two visual fixes to MethodPage.vue, from the deployed page.

Width: the content container was 820px and felt cramped. Raise it to
1080px so the page uses more of the viewport and the sources table has
room, while capping the running prose (lede, ODD blocks, section intros,
strategies, references, closing) at a 760px reading measure so line length
stays comfortable. The table and section rules span the full container.

Scrollbar: the sources table's horizontal scrollbar overlapped the last
row's text. Reserve a strip with padding-bottom: 14px inside the
overflow-x:auto container so the scrollbar sits clear of the content, and
style it thin and themed (scrollbar-width / -color, plus a webkit fallback)
in both themes. Verified on a local prod build at desktop width and 390px.
This commit is contained in:
Justin Visser 2026-06-27 17:00:04 +02:00
parent 8a2a28864e
commit 6a1e08aa74
1 changed files with 31 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/src/components/MethodPage.vue
View file

@ -414,9 +414,23 @@ const references: Reference[] = [
flex: 1;
min-height: 0;
overflow-y: auto;
max-width: 820px;
max-width: 1080px;
margin: 0 auto;
padding: 8px 2px 56px;
padding: 8px 4px 56px;
}
/* The container is wide so the page breathes and the sources table has room,
but running prose keeps a comfortable reading measure rather than stretching
to the full width. The table, references, and section rules still span the
full container. */
.lede,
.block,
section > h2,
section > .sub,
.strategies,
.refs,
.closing {
max-width: 760px;
}
.lede {
@ -536,8 +550,23 @@ code {
.table-scroll {
margin-top: 16px;
overflow-x: auto;
/* Keep the horizontal scrollbar clear of the last row instead of letting it
overlap the text; the scrollbar renders in this reserved strip. */
padding-bottom: 14px;
border: 1px solid var(--border);
border-radius: 14px;
/* A thin, themed scrollbar that stays inside the reserved strip. */
scrollbar-width: thin;
scrollbar-color: var(--ink-4) transparent;
}
.table-scroll::-webkit-scrollbar {
height: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
background: var(--ink-4);
border-radius: 999px;
}
table {