diff --git a/app/static/css/layout.css b/app/static/css/layout.css index 6acaf6c..a66d5bb 100644 --- a/app/static/css/layout.css +++ b/app/static/css/layout.css @@ -246,6 +246,20 @@ body.drawer-open .drawer-backdrop { opacity: 1; } grid-template-columns: 1fr; 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; } @@ -253,10 +267,25 @@ body.drawer-open .drawer-backdrop { opacity: 1; } #portfolio-panel { grid-area: portfolio; } #log-panel { grid-area: log; - /* Stretch (default align-self) so the log panel's border reaches the - bottom of the portfolio next to it — the two right-hand panels - align cleanly. The log body itself sits at the top of the panel; - any height beyond its content is empty padding inside the box. */ + /* Bottom-align with the portfolio panel WITHOUT padding the inside + of either box. The key is `contain: size`: a grid item with this + contracts to declare "my contents do not contribute to my own + 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; }