fix: size Home tool rows by content width - #179
Conversation
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 40e1d97bf9
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| width: calc(33.333% - 1rem) !important; | ||
| max-width: calc(33.333% - 1rem) !important; |
There was a problem hiding this comment.
When the content container is at or below 860px—and especially at the 560px phone breakpoint—these !important width/max-width declarations remain active because the later queries change only flex-basis. At phone widths, min-width is reset to zero, so every card is still capped near one-third width instead of expanding to the intended 100%, leaving multiple cramped cards per row. Override all three sizing properties in the narrower queries, and make the regression test verify computed layout rather than only checking that CSS tokens exist.
AGENTS.md reference: AGENTS.md:L38-L38
Useful? React with 👍 / 👎.
1 participant
Makes the Home tool-card grid respond to the actual main-content width rather than browser viewport width, so the sidebar cannot leave five cramped cards in a row.\n\nVerified live at a 1440px browser viewport with a 1130px main content area: cards reflowed from five ~159px cards to 2+2+1 rows at ~335px each.\n\nFocused tests and Ruff passed.