fix(web): keybinding group headings no longer touch the group above

[fixfon]

Fixes #17541

Problem

In Settings → Keybindings, each group heading sits flush against the card of the group above it. Measured in the browser, the gap between the Thread card and the "Composer" heading is 0px, while the gap below the heading is 10px, so the heading reads as a footer of the previous card (the screenshot in #17541 shows the same thing).

Every other settings page gets 32px between sections from SettingsPageContainer, which lays its children out with flex flex-col gap-8. The keybindings page wraps the new-binding card and all groups in one extra <div inert={!canWriteSettings}> so read-only connections cannot edit them. That wrapper is a plain block, so the container's gap only applies around the wrapper, not between the groups inside it.

Change

Give the inert wrapper the same flex flex-col gap-8 as the page container (apps/web/src/components/settings/KeybindingsSettings.tsx). Groups and the "New keybinding" card now get the same 32px section spacing as the rest of Settings. No other markup, component, or behavior changes.

Why this qualifies as a small, obvious bug fix

The intended spacing is already defined by SettingsPageContainer and used by every other settings page; this page lost it only because of the wrapper. The fix is one class on one element and does not change any product behavior.

Verification

Web dev client (vp run dev in an isolated worktree .t3, macOS), checked in T3 Code's Browser panel at 1280px wide. "Before" was captured by temporarily removing the class on the same server (HMR), so the data and scroll position are identical.

Before: heading touches the Thread card (0px above, 10px below)	After: 32px above, 10px below

Measured with getBoundingClientRect after the fix: all six group boundaries (Navigation→Threads, Threads→Composer, Composer→Terminal, Terminal→Preview, Preview→Appearance, Appearance→Other) are 32px. With "Add keybinding" open, the new-binding card also sits 32px above the Navigation heading:

Checks: vp lint and vp fmt --check on the changed file pass; @t3tools/web typecheck passed on the original commit (rebased onto current main with no upstream changes under apps/web/src/components/settings/).

Not checked: the desktop app was not run; it renders the same web component. Mobile has no keybindings settings page. The read-only (inert) state was not exercised; the wrapper keeps its inert attribute unchanged.

Fix authored by a Codex agent in Codex desktop; verified, screenshotted, and submitted by Claude Opus 5.5 in Claude Code (running in T3 Code).

🤖 Generated with Claude Code

[macroscopeapp]

Approvability

Verdict: Approved at f3c9c4e

Macroscope's review found this PR approvable — This one-line UI fix restores consistent spacing between existing keybinding settings groups without changing their behavior, state, or persistence. It has a small, isolated runtime impact and introduces no schema, deployment, security, or static-analysis changes.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: 41882696-18c7-46a3-8d29-e8c4c6fe2d36

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between bd2346e and f3c9c4e.

---

---

📒 Files selected for processing (1)

• apps/web/src/components/settings/KeybindingsSettings.tsx

---

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 6 remain after this review.

---

---

---

📝 Walkthrough

📝 Walkthrough

Walkthrough

The keybinding settings container now uses a vertical flex layout with an 8-unit gap. Its existing inert condition remains unchanged.

Changes

Keybinding Settings Spacing

Layer / File(s)	Summary
Keybinding container layout apps/web/src/components/settings/KeybindingsSettings.tsx	The container adds a vertical flex layout with an 8-unit gap and retains its existing inert condition.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: juliusmarminge

---

---

Merge Risk: ⚪ Minimal · up to f3c9c

The change adds the intended spacing between keybinding sections without an identified impact on settings behavior; no merge-blocking risk remains.

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check		The active direct issue is #17541. It requires more space above each Keybindings group heading than below it. The PR adds flex flex-col gap-8 to the existing inert wrapper in `apps/web/src/component…
Out of Scope Changes check		The reported change is limited to one class update on the existing Keybindings wrapper. The wrapper retains its inert behavior. The spacing change directly supports issue #17541 and does not add unr…
Title check		The title clearly and concisely describes the spacing fix for keybinding group headings.
Description check		The description includes the problem, change, scope justification, linked issue, verification steps, screenshots, test results, and limitations.

---

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

---

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}