giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: log panel bottom-aligns with portfolio via contain:size

Browse source 
Third attempt at fixing the dashboard's right-column alignment, this
time with the structural cause identified explicitly.

Previous attempts (a55168d, 8347c90) changed align-self on #log-panel
to control how the panel filled its grid area. They got the box
edges aligned, but the underlying problem was a different one:
CSS Grid auto-sizes each row by MAX(intrinsic content height across
items in that row). When the log content is taller than indicators +
portfolio combined, the grid grows rows 2-3 to fit it; portfolio
ends up in a stretched row with empty space below the actual content.

The fix is to stop the log's content from contributing to the grid
row sizing at all. `contain: size` on the log panel declares "my
contents do not affect my intrinsic size" — the grid then sizes rows
2-3 from indicators + portfolio alone, and the log stretches to
inhabit that combined height. A flex column inside the panel
(min-height: 0 on every level of the chain) lets .panel-body fill
the remaining height below the header and scroll instead of
overflowing.

The 1100px mobile breakpoint undoes the constraint: at that width
the grid restructures to a single column, the log no longer shares
a row with indicators + portfolio, and `contain: size` would just
collapse the panel to zero. There the log expands naturally and
page scroll handles it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Giorgio Gilestro 2026-05-29 14:56:11 +02:00
parent f9534f7ad6
commit 652995feea
1 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/static/css/layout.css
View file

@ -246,6 +246,20 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas: "header" "indicators" "portfolio" "log" "news"; grid-template-areas: "header" "indicators" "portfolio" "log" "news";
} }
/* Single-column layout — the log panel no longer shares a row with
indicators + portfolio, so the height-constraint dance above
would just collapse the panel to nothing. Drop the constraint and
let the log expand to its natural content height; page scroll
takes over. */
#log-panel {
contain: none;
display: block;
}
#log-panel .panel-body {
flex: none;
min-height: auto;
overflow-y: visible;
}
} }
#dash-header-container { grid-area: header; } #dash-header-container { grid-area: header; }
@ -253,10 +267,25 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
#portfolio-panel { grid-area: portfolio; } #portfolio-panel { grid-area: portfolio; }
#log-panel { #log-panel {
grid-area: log; grid-area: log;
/* Stretch (default align-self) so the log panel's border reaches the /* Bottom-align with the portfolio panel WITHOUT padding the inside
bottom of the portfolio next to it — the two right-hand panels of either box. The key is `contain: size`: a grid item with this
align cleanly. The log body itself sits at the top of the panel; contracts to declare "my contents do not contribute to my own
any height beyond its content is empty padding inside the box. */ intrinsic size." The outer grid therefore sizes rows 2-3 from
indicators + portfolio alone; this panel stretches to that
combined height; if the log content is taller it scrolls inside.
The flex column + min-height:0 chain lets .panel-body fill the
remaining height below the header and scroll instead of
overflowing the panel. */
contain: size;
display: flex;
flex-direction: column;
min-height: 0;
}
#log-panel .panel-header { flex-shrink: 0; }
#log-panel .panel-body {
flex: 1;
min-height: 0;
overflow-y: auto;
} }
#news-panel { grid-area: news; } #news-panel { grid-area: news; }