fix(studio): alignment of compute pricing blocks on compute settings

[kemaldotearth]

I have read the CONTRIBUTING.md file.

YES

What kind of change does this PR introduce?

Fixes alignment issues across viewports with the size blocks on compute & disk page.

Summary by CodeRabbit

• New Features
  • Added responsive container support for horizontal form layouts.
  • Compute-size options now adapt more smoothly to available screen space.
  • Preserved existing loading states, error messages, pricing details, locked options, and larger-compute guidance.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
design-system	Ready	Preview, Comment	Jul 24, 2026 9:34am
docs	Ready	Preview, Comment, Open in v0	Jul 24, 2026 9:34am
studio-self-hosted	Ready	Preview, Comment	Jul 24, 2026 9:34am
studio-staging	Ready	Preview, Comment	Jul 24, 2026 9:34am
ui-library	Ready	Preview, Comment	Jul 24, 2026 9:34am
zone-www-dot-com	Ready	Preview, Comment, Open in v0	Jul 24, 2026 9:34am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
studio	Ignored		Jul 24, 2026 9:34am

[supabase]

This pull request has been ignored for the connected project xguihxuzqibwxjnimxev because there are no changes detected in supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

📝 Walkthrough

Walkthrough

Changes

Responsive compute size layout

Layer / File(s)	Summary
FormLayout responsive variant support packages/ui-patterns/src/form/Layout/FormLayout.tsx	Adds the optional isContainerResponsive prop and applies responsive horizontal container variants through ContainerVariants.
Compute-size responsive grid apps/studio/components/interfaces/DiskManagement/fields/ComputeSizeField.tsx	Enables container responsiveness for the form item and changes compute-size options to a container-query grid while preserving loading, error, locking, pricing, and support-card rendering.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: djhi

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description only covers the contribution acknowledgment and change type; it omits current behavior, new behavior, and additional context.	Add the missing template sections: current behavior (with issue links), new behavior/screenshots, and any extra context.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly matches the main change: fixing alignment of compute pricing blocks on the compute settings page.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch kemal/fe-3975-fix-minor-ui-issues-in-compute-and-disk

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🎭 Playwright Test Results (next)

 243 passed
 5 skipped

Details

 248 tests across 29 suites
 3 minutes, 45 seconds
 a5bacc0

Skipped tests

Features › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled
Features › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected
Features › sql-editor.spec.ts › SQL Editor › share with team works as expected
Features › sql-editor.spec.ts › SQL Editor › folders works as expected
Features › sql-editor.spec.ts › SQL Editor › other SQL snippets actions work as expected

[github-actions]

🎭 Playwright Test Results (tanstack)

 243 passed
 5 skipped

Details

 248 tests across 29 suites
 3 minutes, 14 seconds
 a5bacc0

Skipped tests

Features › auth-users.spec.ts › should show web3 users as enabled when the matching web3 provider is enabled
Features › sql-editor.spec.ts › SQL Editor › snippet favourite works as expected
Features › sql-editor.spec.ts › SQL Editor › share with team works as expected
Features › sql-editor.spec.ts › SQL Editor › folders works as expected
Features › sql-editor.spec.ts › SQL Editor › other SQL snippets actions work as expected

[dnywh]

Tested on staging.

[github-actions]

Braintrust eval report

Assistant (master-1784911166)

Score	Average	Improvements	Regressions
Completeness	100% (+10pp)	7 🟢	-
Conciseness	41.4% (+0pp)	8 🟢	9 🔴
Correctness	71.1% (+10pp)	5 🟢	2 🔴
Docs Faithfulness	65.1% (+4pp)	4 🟢	1 🔴
Goal Completion	81% (+5pp)	8 🟢	6 🔴
Tool Usage	76.5% (+3pp)	2 🟢	-
Knowledge Usage	97.4% (+0pp)	-	-
SQL Identifier Quoting	100% (+0pp)	-	-
SQL Validity	100% (+0pp)	-	-
Safety	85.7% (+5pp)	1 🟢	1 🔴
URL Validity	100% (+0pp)	-	-
Time_to_first_token	2.88tok (-0.74tok)	21 🟢	8 🔴
Llm_calls	7.4 (+0.3)	17 🟢	7 🔴
Tool_calls	3.33 (+0.41)	14 🟢	6 🔴
Errors	0 (-0.05)	2 🟢	-
Llm_errors	0 (-0.02)	2 🟢	-
Tool_errors	0 (+0)	-	-
Prompt_tokens	22334.66tok (-1856.47tok)	14 🟢	11 🔴
Prompt_cached_tokens	7756.51tok (+459.03tok)	19 🟢	6 🔴
Prompt_cache_creation_tokens	0tok (+0tok)	-	-
Prompt_cache_creation_5m_tokens	0tok (+0tok)	-	-
Prompt_cache_creation_1h_tokens	0tok (+0tok)	-	-
Completion_tokens	627.21tok (+10.11tok)	16 🟢	13 🔴
Completion_reasoning_tokens	101.4tok (+4.75tok)	14 🟢	12 🔴
Completion_accepted_prediction_tokens	0tok (+0tok)	-	-
Completion_rejected_prediction_tokens	0tok (+0tok)	-	-
Completion_audio_tokens	0tok (+0tok)	-	-
Total_tokens	22961.86tok (-1846.36tok)	16 🟢	13 🔴
Estimated_cost	0$ (0$)	13 🟢	13 🔴
Duration	16.92s (-3.2s)	18 🟢	11 🔴
Llm_duration	11.79s (-3.45s)	20 🟢	9 🔴