From b45cc813526404f3097c2c22f19e7adb6e4be5cd Mon Sep 17 00:00:00 2001 From: Sarah Milne <212941134+smilne3@users.noreply.github.com> Date: Thu, 5 Nov 2026 10:42:22 -0500 Subject: [PATCH] Goals no longer scrolls sideways: one goal across until lg, and a long name truncates on a phone (#208) From md, two goal cards shared the column beside the sidebar. Below about 1000px half of it is too narrow for a card's Saved row, so the amount box shrank to 26px and Delete ran past its card and off the screen: at a 768px window the page was 774px wide. Goals now go two across only from lg, where each card has room. And the grid is grid-cols-1 below that rather than a bare grid, whose one column grew to fit a long goal name: on a 390px phone, a long made-up name made the page 447px wide instead of truncating. Measured against a local stand-in, the page is exactly as wide as the window at every width from 360 to 1440px. Co-Authored-By: Claude Opus 5.5 --- components/GoalsList.tsx | 5 ++++- tests/unit/goals-list.test.tsx | 10 ++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/components/GoalsList.tsx b/components/GoalsList.tsx index 69a91b9..8c481f6 100644 --- a/components/GoalsList.tsx +++ b/components/GoalsList.tsx @@ -174,7 +174,10 @@ export function GoalsList({ {initialGoals.length === 0 ? (

No savings goals yet. Add one above.

) : ( -
+ // Two to a row only from lg: below about 1000px, half the column is too narrow for a card's + // Saved row, which pushed the page sideways (#208). grid-cols-1 lets a card be narrower than + // its goal's name, which then truncates, rather than widen the page on a phone. +
{initialGoals.map((g) => ( { expect(bars.length).toBeGreaterThan(0) }) - // Two goals across from md, where the app switches between its phone and desktop layouts (#123), - // and one below it. At sm, 640-767px got two goals across beside the phone layout around them. - it('puts the goals two across from md up and one across below it', () => { + // Two goals across only from lg, and one below it. From md, two across left each card too narrow + // for its Saved row beside the sidebar, up to about 1000px, so the page scrolled sideways (#208). + // grid-cols-1, not a bare grid: a bare grid's one column grows to fit a long goal name, which then + // widened the page on a phone instead of truncating. + it('puts the goals two across from lg up and one across below it', () => { const { container } = render() - expect(container.querySelector('[data-goal-card]')!.parentElement!.className).toBe('grid gap-4 md:grid-cols-2') + expect(container.querySelector('[data-goal-card]')!.parentElement!.className).toBe('grid grid-cols-1 gap-4 lg:grid-cols-2') }) // Stacking must not cost the form any of its fields, nor the list any of its goals.