The subscriptions page's headroom form draws §5's field and row, and .headroom leaves its markup #4408

The headroom form and the budget form beside it on /settings/subscriptions no longer carry the headroom class, and headroom no longer appears as a class in the page's HTML. bun x tsc --noEmit and bun scripts/design-lint.ts are clean. bun test test/subscriptions.test.ts test/settings-visible.test.ts test/design-lint.test.ts passes, 37 tests. I had no browser, so the 5em width and the 390 px wrapping are untested.

§5 classes used

• Forms: both forms keep §5's .row-fields (flex, wraps, gap 8px).
• Inputs and buttons: they keep .input and btn(... size: "sm").
• Wrapping: the subscriptions list card now takes extra: "setting-list". .setting-list .row and .setting-list .row-trail in components.ts give the wrap at 640 px and below, so the row-trail drops under the text. That replaces .row:has(.headroom).

The 5em input width

• §5 had no narrow-number rule, and .input is width: 100%. I added one rule in components.ts, .row-fields .input[type="number"] { width: 5em; }, a selector on existing classes with no new class name.

Left alone

• docs/DESIGN.md is untouched.
• The .headroom rules in content.ts (lines ~272–278) are still there, as asked. They match nothing now and can go in a later pull.
• The budget form's class is dropped too, since it shared the headroom class.
• Both forms still post to the same actions, and the headroom field name is unchanged.

Test

• A new test in test/subscriptions.test.ts asserts class="headroom is absent and that the form action, the row-fields form and the headroom input are present.
• The existing tests at lines 606–664 and test/settings-visible.test.ts:120 pass unchanged.

To try it, open /settings/subscriptions as an admin with a subscription added, then narrow the window to 390 px.

🤖 Generated with Claude Code

Closes #4404

The headroom form and the budget form beside it on /settings/subscriptions no longer carry the headroom class, and headroom no longer appears as a class in the page's HTML. bun x tsc --noEmit and bun scripts/design-lint.ts are clean. bun test test/subscriptions.test.ts test/settings-visible.test.ts test/design-lint.test.ts passes, 37 tests. I had no browser, so the 5em width and the 390 px wrapping are untested.

§5 classes used

• Forms: both forms keep §5's .row-fields (flex, wraps, gap 8px).
• Inputs and buttons: they keep .input and btn(... size: "sm").
• Wrapping: the subscriptions list card now takes extra: "setting-list". .setting-list .row and .setting-list .row-trail in components.ts give the wrap at 640 px and below, so the row-trail drops under the text. That replaces .row:has(.headroom).

The 5em input width

• §5 had no narrow-number rule, and .input is width: 100%. I added one rule in components.ts, .row-fields .input[type="number"] { width: 5em; }, a selector on existing classes with no new class name.

Left alone

• docs/DESIGN.md is untouched.
• The .headroom rules in content.ts (lines ~272–278) are still there, as asked. They match nothing now and can go in a later pull.
• The budget form's class is dropped too, since it shared the headroom class.
• Both forms still post to the same actions, and the headroom field name is unchanged.

Test

• A new test in test/subscriptions.test.ts asserts class="headroom is absent and that the form action, the row-fields form and the headroom input are present.
• The existing tests at lines 606–664 and test/settings-visible.test.ts:120 pass unchanged.

To try it, open /settings/subscriptions as an admin with a subscription added, then narrow the window to 390 px.

🤖 Generated with Claude Code