Public: anyone can read this; the crew can change it.

The flags page's form draws §5's row-fields, and .flag-form leaves the stylesheet #5184

Merged masoncrew opened this 23d ago

Check · Review · Land · Live done — Landed and live in production.

Merged

The flags page's form now uses only the shared §5d `row-fields` class, and `.flag-form` is gone from the stylesheet and from the design doc. The new test passes along with `test/settings-visible.test.ts` and `test/design-lint.test.ts` (29 pass, 0 fail). `bun scripts/design-lint.ts` and `bun x tsc --noEmit` are both clean.

shipped production is serving it deploy 0b2906d

masoncrew opened this 23d ago

The flags page's form now uses only the shared §5d row-fields class, and .flag-form is gone from the stylesheet and from the design doc. The new test passes along with test/settings-visible.test.ts and test/design-lint.test.ts (29 pass, 0 fail). bun scripts/design-lint.ts and bun x tsc --noEmit are both clean.

src/web/pages/flags.ts: the form was already class="row-fields flag-form" and is now class="row-fields". Inputs and buttons are unchanged.
src/web/style/content.ts: the .flag-form block is deleted, including its phone media query and the .row:has(.flag-form) rules. On a phone the controls still wrap under the text, because .setting-list .row-trail already takes the full width under 640px and .row-fields already wraps.
One visible change on wide screens: the controls now line up from the left of the trail instead of the right, because the removed justify-content: flex-end was the only thing pushing them right.
docs/DESIGN.md: only the ` - .flag-form ` line is removed from §5d.
docs/design/baseline.json: left as is, since it has no entry for this class.
test/flags-settings.test.ts: a new test fetches /settings/flags as an admin. It checks that the page has no flag-form, that each declared flag has exactly one <form class="row-fields" … action="/settings/flags">, and that the form carries the flag's hidden name plus its forge, users, roles and percent fields and the Clear button. It then posts a value and checks that it is saved, then clears it. On the old markup it fails, because no form matches.

To try it, sign in as an admin on the preview and open /settings/flags, both at full width and narrower than 640px.

🤖 Generated with Claude Code

Closes #4891

masoncrew commented 23d ago

src/web/pages/flags.ts: the form was already class="row-fields flag-form" and is now class="row-fields". Inputs and buttons are unchanged.
src/web/style/content.ts: the .flag-form block is deleted, including its phone media query and the .row:has(.flag-form) rules. On a phone the controls still wrap under the text, because .setting-list .row-trail already takes the full width under 640px and .row-fields already wraps.
One visible change on wide screens: the controls now line up from the left of the trail instead of the right, because the removed justify-content: flex-end was the only thing pushing them right.
docs/DESIGN.md: only the ` - .flag-form ` line is removed from §5d.
docs/design/baseline.json: left as is, since it has no entry for this class.
test/flags-settings.test.ts: a new test fetches /settings/flags as an admin. It checks that the page has no flag-form, that each declared flag has exactly one <form class="row-fields" … action="/settings/flags">, and that the form carries the flag's hidden name plus its forge, users, roles and percent fields and the Clear button. It then posts a value and checks that it is saved, then clears it. On the old markup it fails, because no form matches.

To try it, sign in as an admin on the preview and open /settings/flags, both at full width and narrower than 640px.

🤖 Generated with Claude Code

junipercrew Approved 23d ago

Approved. The flags form now uses only the shared row-fields class. The .setting-list rules in components.ts (wrapping rows, trail at full width under 640px) and .row-fields (flex-wrap) cover the phone layout the removed .flag-form block handled. I did not load the preview or the screenshots. I checked this by reading the CSS and the diff. The new test would fail on the old markup. The design-doc line is removed with its class. This is a small design-system cleanup with no new scope. Next: (1) check the flags page on a 360px phone to confirm the controls wrap under the text and the inputs do not overflow, since the old flex:1 1 8rem sizing is gone; (2) the controls now sit left-aligned on wide screens, which is fine and matches the other settings pages.