From f8b579b1b8cfe217876845fdc33622ab3aa3254f Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 19:03:11 +0000 Subject: [PATCH 1/2] fix(website): Keep the new-todo text field next to its checkbox 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) Claude-Session: https://claude.ai/code/session_01AmdXndvDqaKsZGyYx6hw63 --- .../Playground/DesignSystem/design-system.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/website/src/components/Playground/DesignSystem/design-system.css b/website/src/components/Playground/DesignSystem/design-system.css index 6319a164ff26..111d64ddfc46 100644 --- a/website/src/components/Playground/DesignSystem/design-system.css +++ b/website/src/components/Playground/DesignSystem/design-system.css @@ -125,8 +125,14 @@ html[data-theme='dark'] .small.rt-TextFieldRoot { border-color: var(--ifm-color-formfield-active); /* Make all borders visible */ } -.listItem .rt-TextFieldRoot { - width: calc(100% - 21px); +/* Checkbox + text field rows (new todo): the field fills the rest of the row, + whatever size the checkbox is styled at */ +.listItem > label:has(> .rt-TextFieldRoot) { + display: flex; + align-items: center; +} +.listItem > label > .rt-TextFieldRoot { + flex: 1; } From a680cde7525e0615d4025d41d517ebcd2ea0c6dc Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 6 Oct 2026 19:08:43 +0000 Subject: [PATCH 2/2] fix(website): Polish the new-todo field's hover and focus look 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) Claude-Session: https://claude.ai/code/session_01AmdXndvDqaKsZGyYx6hw63 --- .../Playground/DesignSystem/design-system.css | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/website/src/components/Playground/DesignSystem/design-system.css b/website/src/components/Playground/DesignSystem/design-system.css index 111d64ddfc46..bd8cc25adbc5 100644 --- a/website/src/components/Playground/DesignSystem/design-system.css +++ b/website/src/components/Playground/DesignSystem/design-system.css @@ -18,9 +18,7 @@ html[data-theme='dark'] .playground-preview { margin-bottom:1ex; } html[data-theme='dark'] .rt-TextFieldRoot, -html[data-theme='dark'] .rt-TextAreaRoot, -html[data-theme='dark'] .small.rt-TextFieldRoot:hover, -html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within { +html[data-theme='dark'] .rt-TextAreaRoot { background-color: var(--ifm-color-emphasis-100); } @@ -124,15 +122,33 @@ html[data-theme='dark'] .small.rt-TextFieldRoot { .small.rt-TextFieldRoot:focus-within { border-color: var(--ifm-color-formfield-active); /* Make all borders visible */ } +/* Dark: a faint lift over the panel instead of a near-black well, and the + same blue as the checked checkboxes for focus */ +html[data-theme='dark'] .small.rt-TextFieldRoot:hover, +html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within { + background-color: rgba(255, 255, 255, 0.06); +} +html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within { + border-color: var(--ifm-color-primary); +} +/* Typed text matches the todo titles beside it */ +.small .rt-TextFieldInput { + font: inherit; +} /* Checkbox + text field rows (new todo): the field fills the rest of the row, whatever size the checkbox is styled at */ .listItem > label:has(> .rt-TextFieldRoot) { display: flex; align-items: center; + min-width: 0; } .listItem > label > .rt-TextFieldRoot { flex: 1; + min-width: 0; +} +.listItem > label .rt-TextFieldInput { + min-width: 0; }