fix(web): provider Runtime controls follow the settings row layout

[ScottN-PV]

Problem

In the provider editor, the Antigravity setup's Runtime row stacks its status and buttons once the row is narrower than 32rem, but the control box keeps its side-by-side width and alignment (sm:w-56 sm:text-right), which follow the viewport instead of the row. In the web app at a 1280×800 viewport the row content is 508px, so the status and the Reinstall button sit right-aligned in a 224px box while the trash button stays at the left edge (#18174).

Change

The control box uses the row's own container query, @min-[32rem]/settings-row:w-56 @min-[32rem]/settings-row:text-right, the same breakpoint SettingsRow stacks at. When the row stacks, the control now renders the full-width layout this row already uses below the sm viewport breakpoint. One class change in ProviderSetupSection.tsx.

Scope and approval

Closes #18174. The triage confirmed the viewport/container mismatch as the cause and asked for the control to follow the row's container query.

Verification

An agent ran these checks on a Linux dev server in a headless browser at 1280×800. No person tested the change. The Antigravity runtime was installed through the Runtime row so the trash button shows.

Before (main)	After

18174-before.mp4

18174-after.mp4

• Measured in the rendered row (offsets from its content edge, row content 508px): on main the status spans 0–224, Reinstall 36–224, trash 0–28; with the change the status spans 0–508, Reinstall 36–508, trash 0–28.

• At a 1000px viewport the provider list stacks above the editor and the row is 616px wide. There main and this branch render the same side-by-side layout (control 392–616, right-aligned):

  

• vp lint and vp fmt --check on the changed file pass. No unit test: the change is one Tailwind variant, and the rendered measurement above is the check.

Model: Claude Opus 5.5, Claude Fable 5.1 (review), GPT-6-Astra (review). Harness: Claude Code, Codex.

[macroscopeapp]

Approvability

Verdict: Approved at 76cf754

Macroscope's review found this PR approvable — This is a one-line responsive styling fix that aligns Runtime controls with the existing settings-row container layout. It has no application-logic, data, deployment, security, or configuration impact.

Notes:

• Diff unchanged. Approvability was decided on eligibility alone.

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

Dismissing prior approval to re-evaluate 76cf754

[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: 7ba269f1-57f5-42c2-97f7-b8a3828000a8

---

📥 Commits

Reviewing files that changed from the base of the PR and between 18656a3 and 76cf754.

---

📒 Files selected for processing (1)

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

---

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

---

---

📝 Walkthrough

Walkthrough

The Runtime controls now use the settings-row container breakpoint for fixed width and right-aligned text. Below that breakpoint, the controls remain full-width and left-aligned.

Changes

Runtime row layout

Layer / File(s)	Summary
Runtime control alignment apps/web/src/components/settings/ProviderSetupSection.tsx	The Runtime controls switch from viewport-based sm: width and text alignment to the @min-[32rem]/settings-row container breakpoint.

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 76cf7

The Runtime controls now follow the row’s available width instead of the viewport, addressing the reported alignment mismatch. The inspected source supports the intended layout, with no remaining merge-blocking concern.

Pre-merge checks | 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: making provider Runtime controls follow the settings row layout. It uses an appropriate conventional commit format.
Description check		The description covers the problem, change, scope and issue link, verification results, UI screenshots, limitations, and agent details. It provides specific before-and-after behavior and test results.
Linked Issues check		The direct linked issue is [#18174]. The PR changes the Antigravity Runtime control in ProviderSetupSection.tsx from viewport-based sm:w-56 sm:text-right to `@min-[32rem]/settings-row:w-56 @min-[3…
Out of Scope Changes check		The whole-PR diff contains one class-name change in apps/web/src/components/settings/ProviderSetupSection.tsx. The change directly implements [#18174] and does not modify unrelated behavior, files, …

---

✨ 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.}