This PR fixes some prettier issues:
- Bump and unify all prettier versions to 3.7.3 across teh whole repo
- Bump the SQL prettier plugin
- When running `test:prettier`, check `mdx` files also
- Run the new prettier format on all files
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## feat(sso): improve SSO management UX (safe deletion + invitation type
selection)
This PR improves the SSO management experience by introducing a safer
deletion flow for SSO providers and allowing explicit control over
invitation authentication type.
## SSO Provider Deletion Improvements
The SSO provider deletion flow has been redesigned to better communicate
the impact of the action and prevent accidental destructive operations.
### UX Improvements
* Replace `ConfirmationModal` with `TextConfirmModal` in `SSOConfig`
* Require typing the SSO domain to confirm deletion
* Display the number of organization members authenticating via SSO who
will be removed
* Add destructive visual styling and clear warnings about irreversible
consequences
* Update confirmation button label to emphasize impact:
* `I understand, delete SSO provider and members`
### Warning Content
The modal now clearly communicates:
* The domain being deleted
* That SSO authentication will be disabled
* That SSO-authenticated members will be permanently removed
* That those members must be re-invited to regain access
If SSO members exist, a highlighted destructive warning box shows:
```
X organization member(s) who authenticate via SSO will be permanently removed
```
### Implementation Details
* Add `useOrganizationMembersQuery` to fetch organization members
* Calculate SSO members by filtering `is_sso_user === true`
* Only display the member warning when the count > 0
* Modal uses `variant="destructive"` and `size="small"`
This pattern follows the existing **Delete organization** confirmation
flow.
### Initial Delete Support
This PR also introduces the underlying deletion functionality:
* Add `useSSOConfigDeleteMutation`
* Add delete button (trash icon, danger styling) in the SSO config
footer
* Layout mirrors `CustomDomainDelete` pattern:
* delete button on the left
* save/cancel actions on the right
* Success toast shown after deletion
* Form resets to explicit default values after deletion
## Invitation Type Selection
Organizations with SSO configured can now explicitly choose the
authentication method when inviting new members.
Previously, invitations always inherited the inviter's authentication
method. This made it difficult to support mixed authentication
organizations.
### New Invitation Options
When SSO is enabled, the invite dialog now shows an **Invitation type**
dropdown:
* **Automatic (based on your account)**
Default behavior; inherits authentication method from the inviter.
* **Require SSO authentication**
Sends an SSO invitation.
* **Email/password authentication**
Sends a non-SSO invitation.
### Implementation Details
* Add `useOrgSSOConfigQuery` to detect if SSO is configured
* Add `requireSso` field to the form schema with enum:
* `auto`
* `sso`
* `non-sso`
* Only display the dropdown when the organization has an SSO provider
* Transform form values before sending to the backend:
```
sso -> { requireSso: true }
non-sso -> { requireSso: false }
auto -> {} (omit parameter)
```
* Update `OrganizationCreateInvitationVariables` to include optional
`requireSso`
* Preserve backward compatibility by only sending the field when
explicitly set
## Bug Fixes
* Attribute mapping preset buttons (Azure, GSuite, Okta) now properly
mark the form as dirty so the save button becomes enabled
* Form reset after deletion now uses explicit default values instead of
the last saved state
## Problems Solved
This PR addresses several UX issues:
1. Deleting an SSO provider previously used a simple confirmation with
no explanation of impact
2. Users could not see how many members would be affected by deletion
3. The destructive and irreversible nature of the action was not
visually emphasized
4. Invitations always inherited the inviter's auth method
5. Organizations could not intentionally mix SSO and non-SSO users
## Types
TypeScript types in `api-types` were updated to support the new
`require_sso` parameter.
---------
Co-authored-by: Chris Stockton <chris.stockton@supabase.io>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
### Summary
This PR adds a dismissable modal that prompts paid org users to fill in
their billing address. We need billing addresses for tax compliance and
the existing banner hasn't been as effective (~10k orgs still missing).
The modal shows on page load when all of these are true:
- ConfigCat flag `enableBillingAddressModal` is on
- Org is on a paid plan (not free)
- Org does not have billing address set
- Org is not partner-managed
- User has BILLING_WRITE permission on stripe.customer
The modal can be dismissed via the close button, but re-opens on every
page navigation.
Once the user saves a valid address, the organizations query is
invalidated and organization_missing_address flips to false - the modal
stops appearing permanently.
<img width="1256" height="703" alt="Screenshot 2026-03-05 at 4 22 11 PM"
src="https://github.com/user-attachments/assets/57e7d1b8-b3b6-4366-ad23-60910a0defe8"
/>
### Testing
#### Automated Tests
I've added unit tests in this PR
#### Manual testing
Manual test cases:
- Free org - modal does not appear
- Partner-managed org - modal does not appear
- User with "developer role" modal does not appear
- Configcat Flag disabled - modal does not appear
- Dismiss modal, navigate to another page - modal re-opens
- Fill form and save - modal closes and does not reappear
- API failure loading billing data - shows error state with Retry button
---------
Co-authored-by: Ignacio Dobronich <ignacio@dobronich.com>
Stacked PR 4/5 for page title improvements. Includes account and
organization-level title updates plus organization list/selector page
titles.
_Base:
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)_
---
## What kind of change does this PR introduce?
- Resolves FE-1960
- Resolves FE-1983
- Resolves DEPR-207
## What is the current behavior?
Page titles between surfaces are inconsistent and vague. Sometimes they
say the product name:
```
My Project | My Org | Supabase
```
...even when on a specific surface like Database > Tables.
Other times they show the entity name but skip over the project or org
name :
```
Edge Functions | Supabase
```
## What is the new behavior?
Account and organization-level title updates plus organization
list/selector page titles, adopting the layout title format introduced
in https://github.com/supabase/supabase/pull/43538:
```
users | Table Editor | My Project | My Org | Supabase
hello-world | Logs | Edge Functions | My Project | My Org | Supabase
Backups | Database | My Project | My Org | Supabase
Authentication | My Project | My Org | Supabase
```
That format is:
entity, section, surface, project, org, brand
## Additional context
Related stacked PRs also based on the the original
[dnywh/feat/page-titles](https://github.com/supabase/supabase/pull/43538)
branch:
- https://github.com/supabase/supabase/pull/43534
- https://github.com/supabase/supabase/pull/43535
- https://github.com/supabase/supabase/pull/43537
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UI nit changes
## What is the current behavior?
- We use big dots `•` to separate semantically different sets of text
that are in the same row
- This looks a bit odd given how large the dot is to text
- We put _Project Settings_ in its own sidebar section but without a
separator like all other sidebar sections
## What is the new behavior?
- Use the smaller dots `·` to separate text
- Place a separator above _Project Settings_ in sidebar
| Before | After |
| --- | --- |
| <img width="1342" height="711" alt="AWS Healthy Toolshed
Supabase-70BD1825-8077-4D1B-84C1-831A4ADAFC0B"
src="https://github.com/user-attachments/assets/70246009-a3c7-4b5c-8d75-122140a637d1"
/> | <img width="1342" height="711" alt="AWS Healthy Toolshed Supabase"
src="https://github.com/user-attachments/assets/e3fc13e4-923d-472e-aaf9-d689e890697b"
/> |
### Changes
- Adds a dismissible banner prompting paid org users to add a Tax ID to
their billing settings
- Only shown to users with billing read permissions on orgs with a paid
plan and no Tax ID set
- Dismissal is persisted per-org via localStorage; banner also
auto-hides when a Tax ID is added
### Testing
- Log in as a user with no billing permissions into a Free Plan Org with
no tax id: no banner is shown
- Log in as a user with billing permissions into a Free Plan Org with no
tax id: no banner is shown
- Log in as a user with billing permissions into a Paid Plan Org with no
tax id
- Assert banner appears at the top
- Head to `/org/_/billing` with a paid Org. Change your billing country
to a not support one (like Paraguay) and click save. Assert that the
banner disappears. Change it back to continue testing.
- Click dismiss: banner disappears and stays dismissed across
navigation/refresh
- Log in as a user with billing permissions into a different Paid Plan
Org with no tax id
- Add a Tax ID via billing settings, assert that the banner disappears
immediately
<img width="1911" height="50" alt="image"
src="https://github.com/user-attachments/assets/d6208d6d-0939-4ff6-9613-5c687e7c622e"
/>
## Summary
- Updates exit survey question wording from "why" framing to "what made
you" framing across both downgrade and project deletion flows
- Based on [Jason Cohen's
research](https://www.lennysnewsletter.com/p/why-your-product-stopped-growing)
showing this reframing roughly doubles response rates and improves
response quality by prompting users to recall a specific trigger event
### Changes
| Location | Before | After |
|---|---|---|
| ExitSurveyModal (downgrade) | "Share with us why you're downgrading
your plan." | "What made you decide to downgrade your plan?" |
| DeleteProjectModal (delete) | "Help us improve by sharing why you're
deleting your project." | "What made you decide to delete your project?"
|
### No downstream impact
- `CANCELLATION_REASONS` chip values unchanged
- API payload fields (`reasons`, `additionalFeedback`, `exitAction`)
unaffected
- No PostHog event names or properties tied to question wording
Closes GROWTH-657
## Test plan
- [ ] Trigger downgrade flow (paid plan → Free) and verify new wording
appears
- [ ] Trigger project deletion on a paid plan and verify new wording
appears
- [ ] Confirm survey submission still works end-to-end
## What kind of change does this PR introduce?
UI clarification.
## What is the current behavior?
Our messaging around the compatibility of:
- Dedicated pooler
- Shared pooler
...in conjunction with the following connection types:
- IPv4
- IPv6
- Direct connection
...is hard to parse.
## What is the new behavior?
Copywriting clarifications to all of the above. Plus:
- Broader copywriting clarifications to `IPV4SidePanel`
- Replace deprecated `Radio` component with `RadioGroupItem_Shadcn_` as
the former has little-to-no visual difference between unselected and
selected states
- Fixed `SidePanel` header gap and button labelling
## Additional context
| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="AWS Healthy Toolshed
Supabase-4587771A-83A2-40E8-845B-256CE7E1A7DB"
src="https://github.com/user-attachments/assets/09591fa1-48b8-4f3c-aaef-733af8dbdc9a"
/> | <img width="1024" height="563" alt="AWS Healthy Toolshed
Supabase-D56A2209-7421-43C2-A7C1-6C6965B3F008"
src="https://github.com/user-attachments/assets/13a05e51-02a5-486a-9549-4c5fe049c65a"
/> |
| <img width="1024" height="563" alt="Add ons
Supabase-10CC55BC-C3D8-4E40-9F73-31FFE8D7F42A"
src="https://github.com/user-attachments/assets/73e206dc-58a3-4356-8e31-cf2ad74383f8"
/> | <img width="1024" height="563" alt="Add ons
Supabase-6311B7FE-4291-4982-968E-5EDBA76DE519"
src="https://github.com/user-attachments/assets/503667ef-9b36-4d62-9872-53ac6b32f56f"
/> |
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UX consistency improvement. Updates DEPR-355.
## What is the current behavior?
Discard-confirm close behavioir is implemented inconsistently across
Studio forms:
- some sheets/dialogs used `useConfirmOnClose`
- some duplicated local `CloseConfirmationModal` components
- some (e.g. `CreateHookSheet`) closed unconditionally and could lose
unsaved changes
## What is the new behavior?
Extracts and validates a reusable discard-close pattern for
dialogs/sheets
- enhances `useConfirmOnClose` with `handleOpenChange(open)` for
`Dialog`/`Sheet` `onOpenChange`
- adds shared `DiscardChangesConfirmationDialog` (`AlertDialog`-based,
override-able copy)
- migrates:
- `InviteMemberButton`
- `CreateHookSheet`
- `EditSecretSheet`
This standardizes close-guard behavior for
backdrop/escape/close-button/cancel-button flows without trying to block
route changes or arbitrary unmounts.
## Additional context
`CreateHookSheet` now also marks the generated secret action as dirty
(`setValue(..., { shouldDirty: true })`) so the discard guard behaves
correctly.
- Added tests for `useConfirmOnClose` covering:
- clean vs dirty close
- handleOpenChange(true|false)
- confirm/cancel behavior
- latest callback ref behavior
A follow-up PR is needed to migrate remaining duplicated
`CloseConfirmationModal` usages and older `useConfirmOnClose` call sites
to the shared `DiscardChangesConfirmationDialog` + `handleOpenChange`
pattern.
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
UI change
## What is the current behavior?
Organization settings are currently spread across a NavMenu. This is
getting unweildy as the amount of children within Organization settings
grows.
## What is the new behavior?
Organization settings are now on a sidebar, just like Project Settings
and most other surfaces.
| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Supabase"
src="https://github.com/user-attachments/assets/3889858c-157a-4deb-8714-71fe9cf002e6"
/> | <img width="1024" height="563" alt="General Supabase"
src="https://github.com/user-attachments/assets/1b4eb2c3-a67c-4eda-ab3c-e6610dd5ccf4"
/> |
## Additional context
@fsansalvadore and the design team have have other efforts going on to
reduce interface clutter, e.g. nested sidebars.
## What kind of change does this PR introduce?
- Feature
- Resolves DEPR-355
## What is the current behavior?
Only one email address can be invited to an organization at a time.
## What is the new behavior?
- Multiple email addresses can be invited (at a single scope) to an
organization at one time
- List of email addresses detected via comma-separation
- Pluralization on fields and labels
- Table and copywriting cleanup
| Before | After |
| --- | --- |
| <img width="808" height="691" alt="Supabase"
src="https://github.com/user-attachments/assets/f6450c26-968c-4ee8-bb7c-d6f6a3af1209"
/> | <img width="808" height="691" alt="8298"
src="https://github.com/user-attachments/assets/2d7e3869-b9d4-4a4f-89aa-ae55d67e794b"
/> |
| <img width="1024" height="560" alt="Supabase"
src="https://github.com/user-attachments/assets/9a255167-fcd3-4294-ba3a-9160bd500cff"
/> | <img width="1024" height="560" alt="Supabase"
src="https://github.com/user-attachments/assets/daba5bb8-eb12-43dc-86de-217e9baf0b72"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added support for inviting multiple team members simultaneously via
comma-separated emails.
* **Improvements**
* Enhanced member management interface with clearer status indicators
(You, Invited, SSO, MFA enabled/disabled).
* Improved feedback messages for invitation outcomes and member status
changes.
* Updated member table layout with summary footer displaying member
count.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Currently `/org/_` redirects to `/general` (org settings) after picking
an org, this makes it redirect to the project list
## to test
- go to /dashboard/org/_
- select org
- redirects to project picker
## test 2
- go to /dashboard/org/_/general
- select org
- redirects to /org/whatever/general (settings)
<img width="2892" height="2342" alt="image"
src="https://github.com/user-attachments/assets/7e08929d-abc3-4397-b89d-99cc52d8190e"
/>
This is the third and final PR to complete the new connect sheet.
First: https://github.com/supabase/supabase/pull/42367
Second: https://github.com/supabase/supabase/pull/42373
This re-adds the Direct, ORM, MCP tabs and their content, including via
connect.schema.
To test:
- Flag will be enabled on all staging projects
- Click connect and notice new Sheet
- Click all tabs and ensure content is correct
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Multi-mode connection flow with mode selector and icons (framework,
direct DB, ORM, MCP)
* New framework/variant/library selector, richer connection guides and
install steps (Prisma, Drizzle, direct)
* MCP onboarding flows (Cursor, Codex, Claude Code) with server/auth
commands and configuration UIs
* **Refactor**
* Connect schema and state rebuilt to be mode-driven with improved step
resolution and cascading state updates
* **Tests**
* Expanded unit tests covering framework resolution, connect flows, and
mode behaviors
* **Chores**
* ESLint ignores updated for content files
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## What kind of change does this PR introduce?
- ~Feat~ Chore
- Resolves DEPR-33
## What is the current behavior?
The dialog used to delete an organization uses a ”type this org’s name
in before you can press this button” interaction but:
- A) Enables the button the whole time
- B) We already have this componentized in TextConfirmModal
## What is the new behavior?
- Refactored this dialog to use `TextConfirmModal` instead
- Updated design docs to make this prop clearer
| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Supabase"
src="https://github.com/user-attachments/assets/85c965f6-29d4-4696-8c0c-a54ddcbe6167"
/> | <img width="1024" height="759" alt="Supabase"
src="https://github.com/user-attachments/assets/0a96ca65-15c3-4b1b-bb10-620526c059b8"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Documentation**
* Updated Text Confirm Dialog documentation with clarifications: the
confirm action remains disabled until input exactly matches the required
string, and leading/trailing whitespace is trimmed from the input.
* **Refactor**
* Streamlined the organization deletion confirmation workflow for
improved user experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Main fix was to address the size of the `OrganizationCard` on the redeem
code page - was taking up the height of the flex div when the number of
cards is <= 3 (Main fix is `max-h-min` in `OrganizationCard`)
### Before
<img width="1270" height="411" alt="image"
src="https://github.com/user-attachments/assets/73228b62-f9db-43c8-813b-cb04c9f6cb2b"
/>
### After
<img width="1255" height="420" alt="image"
src="https://github.com/user-attachments/assets/a1d82753-daba-4c3d-a64d-3bb913ded161"
/>
## Other changes
- Small improvement to perceived loading speed by only rendering the
cards as loaders, text content on the left should render immediately on
page load
- Loading state to consider if the feature flag has been loaded as well
to prevent flicker of UI
- Hide the "Go to org" button when redeemed on the org page already
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved loading/gating so the redemption UI waits for feature flags
and profile data before showing content.
* Disabled submit when the redemption form is invalid to prevent empty
submissions; submit button respects form validity, permissions, and
loading state.
* **UI**
* Conditionally shows upgrade and "Go to organization" options based on
organization plan and current path.
* Adjusted card layout to better constrain content height.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
## Context
Adds a UI state for when the feature flag for code redeem is disabled
<img width="1270" height="424" alt="image"
src="https://github.com/user-attachments/assets/90e97869-f1e5-456b-9170-4a0a576f1064"
/>
## Other changes involved
Mostly refactor + clean up here
- Pass `onClick` event to `OrganizationCard`, rather than declaring an
extra parent `div` to handle the click event
- Use `Admonition` instead of the `Alert` components within
`CreditCodeRedemption`
- Adjust element semantics in `CreditCodeRedemption` (Opting for `p`
instead of `h4` and `h1` to show credit related information)
- Use `UpgradePlanButton` component for upgrade CTA (Handles behaviour
depending if user has perms to update plan of the organization)
- Use `TimestampInfo` component for expires at
- Fix error handling when calling `redeemCode` (use `mutate` instead of
`mutateAsync` which requires a try catch)
## To Test
- [ ] Need to verify that the `TimestampInfo` component renders
correctly after redeeming a code
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Organization selection with modal-driven credit code redemption and
URL prefill.
* Upgrade button accepts an organization slug and integrates into the
upgrade flow.
* Organization cards support an optional click handler for custom
interactions.
* **UI/UX Improvements**
* Success/error messaging switched to admonition styling; expiry dates
shown with timestamps.
* Horizontal form layout, medium dialog sizing, compact balance/code
presentation, and invisible CAPTCHA with reset on success.
* Feature gated by a flag with clearer loading/error states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Bug introduced [here](https://github.com/supabase/supabase/pull/42496) -
just a small issue in which we're returning the wrong element if
`isLink` in `OrganizationCard.tsx`
## To test
- [ ] Verify that you can click on an organization card in the
/organizations page
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Fixed organization card component rendering to correctly handle link
wrapping behavior based on configuration state.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
### Summary
This PR adds the ability to download payment receipts for paid Orb
invoices from the billing invoices page.
This depends on the backend PR that adds the receipt download endpoint.
### UI screenshot
The receipt button only appears for invoices with `status === 'paid'`.
<img width="738" height="276" alt="Screenshot 2026-01-22 at 8 53 06 PM"
src="https://github.com/user-attachments/assets/e4fa3f5f-0222-4787-9c7d-96ae99346808"
/>
### Testing
#### Manual testing
1. Navigate to Organization Settings → Billing → Invoices
2. Find a paid invoice in the list
3. Click the receipt icon button
4. Verify receipt PDF opens in new tab
5. Try with an unpaid invoice - button should not appear
6. Try invoice that has no receipt (paid with credit balance) → error
toast with "Receipt not available"
### Alternative design choices
#### Alternative option 1
<img width="712" height="266" alt="Screenshot 2026-01-22 at 8 46 24 PM"
src="https://github.com/user-attachments/assets/2eb7333c-cb19-4e6d-b495-72c43fb26475"
/>
#### Alternative option 2
<img width="723" height="264" alt="Screenshot 2026-01-22 at 8 56 30 PM"
src="https://github.com/user-attachments/assets/34b917b6-fc8c-4398-b372-ff467920fe69"
/>
#### Alternative option 3
<img width="702" height="265" alt="Screenshot 2026-01-22 at 8 47 58 PM"
src="https://github.com/user-attachments/assets/b3e15b1c-a804-4df9-981e-1ec578d7e4fe"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added invoice receipt viewing and download functionality. Paid
invoices with outstanding amounts now include a Receipt action, enabling
users to access detailed payment documentation through the billing
interface. Error handling ensures a seamless experience when retrieving
receipts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Popover ui component to use portal by default, remove all manual declaration of portal for PopoverContent in dashboard
* Forgot to add ui changes lol
* Clean uop
We use the quota term for actual billing quotas, so using "Quota" as a term for configurable Realtime limits is confusing. While there are varying per-plan limits, they are not used for billing. Realtime Quotas on plans refer to Realtime Messages and Realtime Peak Connections
* Add shimmering-loader CSS to ui-patterns.
* Import the shimmering-loader classes from the ui-patterns component.
* Remove ShimmeringLoader from studio.
* Migrate studio to use ui-patterns/ShimmeringLoader.
* Migrate away from using default import for ShimmeringLoader.
* Fix the css imports in docs and studio.
- Adds missing log and active compute hour insights in both usage summary and daily stats (only Platform Plan)
- Adds database size usage insights for platform orgs
- Hide the circular progress bar if the usage item has no included usage (otherwise always 100% filled with any usage)
- Hide percentage if usage item has no included usage
- Adjust upcoming invoice breakdown to properly handle compute and active compute hours
- Hide subscription change button for platform/enterprise orgs (we already have a callout saying they gotta reach out to us)
- Adjusted database size insights for platform to no longer display 0.5 GB per project being included
* chore(studio): integrate cursor rules with form patterns
* chore(studio): update FormLayout inner styling
* chore(studio): align actions form field to the right
* chore(design-system): wrap each form field in a CardContent
