Repository navigation
fix(website): Keep the new-todo text field next to its checkbox - #4252
Conversation
The playground chrome restyle (#4174) sized preview checkboxes to 1rem, so checkbox plus margins grew past the 21px the text field's width left for it, and the field wrapped onto its own line under the checkbox. The row now lays out as flex so the field fills whatever space the checkbox leaves. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AmdXndvDqaKsZGyYx6hw63
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
In dark mode the hovered or focused field was a near-black well with a pale border on the lighter preview panel. It now lifts slightly over the panel and focuses with the same blue as the checked checkboxes. Typed text uses the same font as the todo titles, and the row can no longer overflow when that font makes the input's intrinsic width larger. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01AmdXndvDqaKsZGyYx6hw63
This branch was successfully deployed
2 participants
Requested by Nathaniel · project thread
Motivation
In the todo demo (homepage, Getting Started › Mutations, Optimistic Updates), the "new todo" row at the bottom of each list showed only an empty checkbox. The text field had wrapped onto its own line underneath, where it looked like a divider.
Regression from #4174, which set preview checkboxes to
1rem. With its default margins a checkbox now takes about 23px, but the field's width wascalc(100% - 21px), so the two no longer fit on one line.Solution
TextInput, the label lays out as a flex row and the field takesflex: 1(withmin-width: 0). The field now sits right after the checkbox and fills the rest of the row, whatever size the checkbox is.TextInputs use the surrounding font, so typed text matches the todo titles. They used Arial before.--ifm-color-primary, the same blue as the checked checkboxes.Only
design-system.csschanges. Checked in a local dev build at 1280px and 375px, light and dark, at rest, on hover and on focus. Pages: the homepage,/docs/getting-started/mutationsand/rest/guides/optimistic-updates. The Collection demo (TextInputwithout a label) renders the same.🤖 Generated with Claude Code
https://claude.ai/code/session_01AmdXndvDqaKsZGyYx6hw63