repos
repos / finance / log / 3d0314c3

home: align Top picks list rows across horizon cards

3d0314c3 by Isaac Bythewood · 1 month ago 

home: align Top picks list rows across horizon cards

The desc text varies by horizon, Tomorrow wraps to four lines while Next
week is two, so the per-card flex stacks made the lists start at
different Y positions. Make each card a subgrid spanning the picks-grid's
title / desc / list rows so the desc row sizes to the tallest desc and
all four lists begin at the same Y. Columns also subgrid so the inner
column is constrained to the card's 1fr of the parent (otherwise the
desc's max-content blew out the inner column width).
modified frontend/static_src/home/styles/home.scss 
@@ -346,12 +346,23 @@  gap: 12px;}/* Each card is a subgrid of the picks-grid, spanning three shared row   tracks (title, desc, list). That makes the desc row tall enough to fit   whichever horizon's description wraps deepest, so the list itself starts   at the same Y across all cards in the row. Without this the per-card   intrinsic heights drift and the rank-1 rows wouldn't line up. */.picks-col {  @include card;  padding: 10px 12px 8px;  display: flex;  flex-direction: column;  gap: 4px;  display: grid;  /* columns subgrid so the card's single inner column matches its 1fr of     the parent grid (without it, the inner column auto-sized to the desc's     max-content and overflowed the card). Rows subgrid so the title, desc,     and list rows all line up across the four cards. */  grid-template-columns: subgrid;  grid-template-rows: subgrid;  grid-row: span 3;  row-gap: 4px;  min-width: 0;}
@@ -366,8 +377,6 @@  font-size: 0.7rem;  color: var(--ink-faint);  line-height: 1.35;  /* clamp to two lines on a phone so the column heights stay close */  min-height: 2.6em;}.picks-col__list {
© 2026 Isaac Bythewood · Some rights reserved