diff --git a/assets/styles/layout.css b/assets/styles/layout.css index 00d74b8..b1b165b 100644 --- a/assets/styles/layout.css +++ b/assets/styles/layout.css @@ -641,18 +641,28 @@ aside { padding: 1em; } -/* Home: full list height — no max-height; window scroll. */ +/* Home: list lives in a short pane (~10 cards); more rows load from DB but scroll inside the aside. */ .home-aside-highlights { + --home-highlights-visible-rows: 10; + --home-aside-highlights-gap: 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; + min-height: 0; width: 100%; } -/* Wrapper around the list (keeps end padding; no max-height so highlights aren’t trapped in a short box). */ +/* Scroll: roughly ten line-clamped cards (quote + meta + gap); full list up to repository limit. */ .home-aside-highlights__scroller { - overflow: visible; + max-height: min( + 80vh, + calc(var(--home-highlights-visible-rows, 10) * (5.85rem + var(--home-aside-highlights-gap, 0.9rem)) - var(--home-aside-highlights-gap, 0.9rem)) + ); + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior: contain; + scrollbar-gutter: stable; padding-right: max(0.6rem, calc(0.35rem + env(safe-area-inset-right, 0px))); box-sizing: border-box; } @@ -674,7 +684,7 @@ aside { padding: 0 0.2rem 0 0; /* keep inset from scrollbar */ display: flex; flex-direction: column; - gap: 0.9rem; + gap: var(--home-aside-highlights-gap); } /* Block body HTML (full quote + like the article) must not sit inside — use overlay “hit” link. */ diff --git a/src/Controller/DefaultController.php b/src/Controller/DefaultController.php index b5fd960..e29830c 100644 --- a/src/Controller/DefaultController.php +++ b/src/Controller/DefaultController.php @@ -31,7 +31,7 @@ class DefaultController extends AbstractController 'home_magazine_strip_tiles' => $magazineStrip['tiles'], 'home_featured_tiles' => $this->magazineContent->buildHomeMixedFeaturedWallTiles($categoryATags), 'home_sidebar_category_recent' => $this->magazineContent->buildHomeSidebarCategorizedRecent($categoryATags), - 'home_highlights' => $this->articleHighlightRepository->findRecentForHome(40), + 'home_highlights' => $this->articleHighlightRepository->findRecentForHome(100), ]); } diff --git a/src/Repository/ArticleHighlightRepository.php b/src/Repository/ArticleHighlightRepository.php index 7639aa9..69f1a97 100644 --- a/src/Repository/ArticleHighlightRepository.php +++ b/src/Repository/ArticleHighlightRepository.php @@ -22,10 +22,11 @@ class ArticleHighlightRepository extends ServiceEntityRepository /** * Newest highlights across published/archived long-form, for the home aside. + * The home page caps the query (e.g. 100); the template scroller shows roughly ten at a time. * * @return list */ - public function findRecentForHome(int $limit = 36): array + public function findRecentForHome(int $limit = 100): array { if ($limit <= 0) { return [];