fix: add explicit height to .main-content so overflow-y scrolls

When the sidebar was changed to position:fixed (overlay mode), flex:1
was removed from .main-content. Without flex:1 or an explicit height,
.main-content relied on align-items:stretch for its height constraint.
This is unreliable for establishing a definite height that overflow-y:auto
respects — the element can grow with its content instead of constraining
at 100vh and scrolling.

Add height:100% to .main-content so it has a definite height from the
parent chain (body 100vh → #app 100% → .layout 100% → .main-content 100%).
This ensures overflow-y:auto creates a proper scroll container, which is
required for both the scroll-based infinite loading and mark-as-read to work.

https://claude.ai/code/session_01DpWhB9uGGMBnzqS28HxnuV

1 files changed, 1 insertions, 0 deletions

diff --git a/frontend-vanilla/src/style.css b/frontend-vanilla/src/style.css
index f724916..a4bcbe9 100644
--- a/frontend-vanilla/src/style.css
+++ b/frontend-vanilla/src/style.css
@@ -200,6 +200,7 @@ html {
 /* Main Content area - always fills full width (sidebar overlays) */
 .main-content {
   width: 100%;
+  height: 100%;
   min-width: 0;
   overflow-y: auto;
   background-color: var(--bg-color);