[smilne3]

This finishes #208. The Goals page scrolled sideways at tablet widths, and I found it could on a phone too, with a long goal name. It no longer does at any width.

What changes for you

• On your iPhone: nothing, unless a goal's name is too long for its card. Then the name now ends in "…", instead of widening the page so it scrolls sideways.
• On a tablet or a narrow desktop window, 768 to 1023px wide: goals are listed one per row, instead of two cramped ones whose Delete ran off the screen.
• From 1024px: two goals across, as before.

How

The goal grid in components/GoalsList.tsx changed from grid gap-4 md:grid-cols-2 to grid grid-cols-1 gap-4 lg:grid-cols-2:

• lg: instead of md:. Beside the sidebar, a card needs about 360px for its Saved row at full size: the label, the amount box, Update and Delete. Narrower, the amount box shrinks first. Two across, it was 33px wide at 900px and 95px at 1024px, so two across starts at 1024px.
• grid-cols-1 instead of a bare grid. A bare grid's one column grows to fit its widest card, and a card's name doesn't wrap. So a long name widened every card and the page. grid-cols-1 lets the column be narrower than the name, and the name's own truncate takes over. It's the same pattern AccountList already uses.

Checked

I ran a production build against a local stand-in for Supabase, with three made-up goals, one of them with a long name, and measured the page in a browser at 14 widths from 360 to 1440px:

Width	Before	After
390 (phone)	page 447px wide: the long name widened every card	390, one across, the long name truncated
768	page 774 wide, amount box 26px, Delete 38px past its card	768, one across, amount box 112px
800 to 1023	two across, amount box 26 to 95px. At 800 and 820, Delete still reached past its card.	one across, amount box 112px
1024 to 1099	two across, amount box 95 to 108px	the same
1100 and up	two across	the same

• After the change, the page was exactly as wide as the window at every width, and no button reached past its card.
• With short names, the phone layout is unchanged.
• Locally: vitest passes 2482/2482 in both time zones. tsc, lint, check:secrets, check:invariants and next build all pass.
• The existing test pinning the grid's classes now pins the new ones, with the reason.

iPhone check

The owner checked the Vercel preview on an iPhone on 2026-11-05, against this list, and it looked good. That preview was built from b45cc81, this PR's final commit.

• Goals looks as it does now: each goal's name, its bar, and Saved with Update and Delete on one line.
• The page doesn't move sideways when you drag it left and right.

Closes #208.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
every-dollar-counts	Ready	Preview	Nov 5, 2026 5:34pm UTC