Files
supabase/apps/docs
Danny White 325a5a0da7 fix(studio): polish extension installation dialogs (#51463)
## Problem

The enable-extension dialog in #51440 needs clearer installation copy
and a consistent disclosure for custom-schema guidance. On narrow
screens, footer buttons touch and dialog content can scroll sideways.

## Solution

Polish the dialog on top of #51440:

- Explain fixed-schema requirements and hide custom-schema guidance when
the extension requires a specific schema.
- Share the disclosure interaction with the session-expired and
API-hardening dialogs through `ui-patterns/DialogDisclosure`, documented
with a live design-system example.
- Fix narrow-screen overflow and add vertical spacing to shared dialog
footers.
- Refine inline-code styling and update the PostGIS instructions and E2E
button locator.


| After |
| --- |
| <img width="852" height="710" alt="CleanShot 2026-10-09 at 12 17
47@2x"
src="https://github.com/user-attachments/assets/59f6f1e7-9884-4cdb-b678-62b7f88a8ec5"
/> |
| _Standard extension_ |
| <img width="836" height="1092" alt="52254"
src="https://github.com/user-attachments/assets/dbf53d3e-6583-4c3b-8f43-577e0723d9a7"
/> |
| _Standard extension expanded accordion_ |
| <img width="836" height="604" alt="CleanShot 2026-10-09 at 12 20
04@2x"
src="https://github.com/user-attachments/assets/c8e3961f-2683-440c-a2a2-48ccd53c4a17"
/> |
| _Extension with fixed schema_ |

## Review instructions

1. Open `/project/<ref>/database/extensions`. Turn on the toggle for a
disabled `postgres_fdw` extension. Expand **Install in a different
schema** and check its hover, keyboard focus and full-width click
target. Repeat with `pg_cron` or `pgmq`: the intro must say **must**,
and custom-schema guidance must be absent. Cancel without enabling.
2. At 320 px and 375 px, check the extension dialog's alignment,
inline-code rendering, wrapped SQL and stacked **Enable** / **Cancel**
spacing. Confirm the page does not scroll sideways.
3. On a platform project with the Data API enabled, open
`/project/<ref>/integrations/data_api/settings`. Under **Harden Data
API**, click **Harden Data API**. Expand both sections and check the
same trigger behaviour. Confirm completed sections still show their
check icons. Close without applying either action.
4. The session-expired dialog has no direct route. It is rendered by
`apps/studio/hooks/misc/withAuth.tsx` after authentication loading
exceeds 10 seconds. For repeatable local review, temporarily pass
`visible={true}` to its `SessionTimeoutModal` callsite, then open
`/projects`. Expand **Having trouble?** by clicking the text or chevron
and using Enter / Space. Check the help text and controls. Close the
dialog without signing out or clearing site data, then undo the
temporary prop change.
5. In the design system, open
[`/docs/components/dialog#optional-details`](https://design-system-git-dnywh-choreextension-dialog-polish-supabase.vercel.app/design-system/docs/components/dialog#optional-details).
Click **Export results**, then expand **What’s included** with the mouse
and keyboard. The demo imports the same `ui-patterns/DialogDisclosure`
used by Studio.
6. Open another dialog and an alert dialog at a narrow width. Check the
shared 8 px gap between stacked footer buttons. Review inline-code
examples on `/docs/components/typography` for the shared styling change.
2026-10-12 10:18:45 +11:00
..
2026-07-01 12:59:00 +02:00
2026-10-02 12:33:25 -05:00

Reference Docs

Supabase Reference Docs

Maintainers

If you are a maintainer of any tools in the Supabase ecosystem, you can use this site to provide documentation for the tools & libraries that you maintain.

DocSpec

We use documentation specifications which can be used to generate human-readable docs.

  • OpenAPI: for documenting API endpoints.
  • SDKSpec (custom to Supabase): for SDKs and client libraries.
  • ConfigSpec (custom to Supabase): for configuration options.
  • CLISpec (custom to Supabase): for CLI commands and usage.

The benefit of using custom specifications is that we can generate many other types from a strict schema (eg, HTML and manpages). It also means that we can switch to any documentation system we want. On this site we use Next.js, but on Supabase's official website, we use a custom React site and expose only a subset of the available API for each tool.

Contributing

To contribute to docs, see the style guide for how to write a page, and the developers' guide and contributing guide for repo mechanics. If you write with an AI coding agent, use the /write-the-docs skill to draft and /edit-the-docs to revise an existing page.