## 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.
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.