dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,898 Commits 1,797 Branches 62 Tags
bot/decrease-eslint-ratchet-baselines
Commit Graph
34 Commits
This Branch
This Branch
All Branches
Author SHA1 Message Date
Anthony Lio b13d6c2878 feat(chore): add a lint ratchet for shadcn rules (#51014) 
## Problem

shadcn lint rules has been soft landed in #50676 and are now on as
warnings in every app, but nothing stops a PR from adding new violations

linear: FE-4473

## Solution

- moved the ratchet script and its tests from `apps/studio/scripts` to
`packages/eslint-config-supabase` so every app runs one copy
- added a shared rule list,
`packages/eslint-config-supabase/ratchet-rules.json` with the shadcn
rules
- www, docs, design-system, ui-library and learn get `lint-ratchet.yml`
with one job per changed app (triggered by the app, `packages/**` or the
lockfile) + a weekly `lint-ratchet-decrease.yml` (as for studio ratchet)
- package tests run in `eslint-config-supabase-tests.yml`

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. run `pnpm --filter ./apps/www run lint:ratchet`
2. add `p-[13px]` to a `className` in any www component and run it
again. it fails with `shadcn/no-arbitrary-values` and the file name with
`(+1)`
3. revert change
4. run `pnpm --filter eslint-config-supabase test` and see 6 tests pass
5. in ci, check `Ratchet studio lint checks` and the `ratchet (<app>)`
jobs for the apps this pr touches

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Developer Improvements**
* Expanded automated lint checks to cover additional apps and shared
package changes.
* Added checks for arbitrary Tailwind values, unknown classes, and raw
colors across supported apps.
* Added automated baseline updates that can open or update a pull
request when lint counts change.
* Added tests for the lint configuration and support for combining
multiple rule files.
* Updated Studio lint notifications to exclude Shadcn rules with
zero-baseline counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-10-02 14:13:59 +03:00
Anthony Lio 8ebbfe3272 feat(chore): bump cn (#51016) 
## Problem

currently using `cn` 0.2.5 makes `@shadcn/lint` lint run printed a
notice as it needs 0.3.2 or later

## Solution

- added `cn: ^0.4.0` to the pnpm catalog. `packages/ui` and `blocks/vue`
now use `catalog:` so they stay on the same version
- added `cn` to the root `devDependencies`
- runtime changes from 0.2.5 to 0.4.0

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. run `pnpm install`
2. run `pnpm --filter ui exec vitest run` and `pnpm --filter ui-patterns
exec vitest run` and see them pass
3. run `pnpm --filter @supabase/vue-blocks run typecheck` and see it
pass

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Chores**
* Updated package version management across the project to keep related
packages aligned. This maintenance change does not alter the app’s
features or behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-29 18:32:27 +03:00
Anthony Lio e7f0d3c04f fix(ui): popover component (#50657) 
## What kind of change does this PR introduce?

fixture on the popover + command components

## What is the current behavior?

currently there is a misalignment in the command component <> searchbar
icon and items + the popover menu animation in is slightly scattered

## What is the new behavior?

- fixes icon alignment in command component
- updates popover animation in 

`command`
| state | preview |
| -------|------|
| before | <img width="881" height="542" alt="image"
src="https://github.com/user-attachments/assets/e38aa22f-5eea-4b08-8a24-254e26bf90fe"
/> |
| after | <img width="881" height="542" alt="image"
src="https://github.com/user-attachments/assets/85608e11-8415-4d47-945f-cc13772e4ad1"
/> |

`popover`
| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/cbb2da1a-6f73-4a8d-87d6-21e8b636c110"
/> |
| after | <video
src="https://github.com/user-attachments/assets/1b0832f5-e6ac-4e93-ae78-9e0aee31205c"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
  - Adjusted command input spacing for improved visual alignment.
- Updated popover transitions with state-based fade and zoom animations,
and refined their visual origin.
  - Set a consistent size for the AI docs command icon.
- **New Features**
- Added an option to customize the command menu input wrapper’s styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-29 18:17:45 +03:00
Anthony Lio 4a9b4b0a9e feat(docs): o11y agent setup stepper (#50962) 
## Problem

on monitoring agent pages the prompt lives in a "prompt" tab next to
agent ones, while each agent tab ended with "paste the prompt" users
have to work out that the prompt is sitting in that previous tab

## Solution

this pr is a proposal to set agent setup as a two stepper `1` for the
prompt panel `2` holds the agent tabs:

- extracts prompt into a first step
- moves agent tabs within their own step
- polishes agent docs to match recent ui updates
- sets `prompt` as an anchor link within agent tabs 

| state | preview |
| -------|------|
| before | <img width="823" height="452" alt="image"
src="https://github.com/user-attachments/assets/a6a01832-ea73-48c1-b31d-25a0ef970e4e"
/> |
| after | <img width="823" height="716" alt="image"
src="https://github.com/user-attachments/assets/f5014ad0-1555-4578-b4b1-5bf2733b4d37"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

Provide a clear numbered procedure that the PR reviewer can walk
through.

1. visit
[/automate-with-agents/health](https://docs-git-docs-agent-setup-stepper-supabase.vercel.app/docs/guides/observability/automate-with-agents/health#set-up-the-agent)

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Agent setup instructions are organized into prompt-copying and
scheduling steps, with links to harness documentation.
  * Code tabs support icons and controlled selection.
  * Source code samples support adjustable footer notches.
* **Bug Fixes**
  * Step numbers now display the correct shadow.
* Links to page anchors now scroll to, focus, and highlight their
targets, while respecting reduced-motion preferences.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-28 17:28:11 +03:00
Anthony Lio 12a1fd5427 fix(docs): codetabs file tabs (#50811) 
## Problem

#50734 restyled single named code blocks as file tabs but code blocks
grouped with `<$CodeTabs>` render through a separate path and kept the
old pill style

## Solution

- add a `CodeTabs` component with the same file tab styling
- sets the `<$CodeTabs>` remark directive at it instead of `Tabs`
- remove the unused `NamedCodeBlock` copy in www (nothing in www outputs
it)

| state | preview |
| -------|------|
| before | <img width="781" height="352" alt="image"
src="https://github.com/user-attachments/assets/1e6261ae-30b7-4397-b2f4-c31bad5f9839"
/> |
| after | <img width="762" height="291" alt="image"
src="https://github.com/user-attachments/assets/851b25ed-98b7-4a5c-8d3e-fece385e3af2"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. visit
[/docs/guides/getting-started/quickstarts/nextjs](https://docs-git-fix-docs-codetabs-file-tabs-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#7-query-supabase-data-from-nextjs)


## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Documentation code samples support labeled tabs, with the first tab
selected by default.
* Source menus show organization and repository paths, and source links
remain labeled “View source.”
* **Style**
* Updated code sample tabs with active-tab accents and flares, plus
clearer focus outlines and depth effects.
* Refined code-block spacing and presentation, including a styled source
footer and updated menu alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-25 18:12:11 +03:00
Anthony Lio e3febf3b63 feat(lint): add shadcn lint warnings (#50676) 
## Problem

six apps had no shared lint checks for invalid tailwind classes,
off-scale values, and raw colors.

## Solution

add @shadcn/lint warnings with narrow exceptions for existing theme
colors and artwork. fix several invalid classes. the existing lint
command reports findings without blocking prs on the current warning
count.

## Review instructions

1. check the shared rules and app-specific exceptions.
2. run `pnpm --filter design-system lint` and confirm it reports shadcn
warnings without errors.

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved vertical alignment of checkbox labels and supporting text in
dialogs, settings, and examples.
* Corrected alignment of organization member details and the color
styling of deprecated chart text.
* Standardized spacing in the date and time editor without changing its
appearance or behavior.

* **Developer Experience**
* Updated linting and UI configuration across several apps to support
consistent style checks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-25 17:50:50 +03:00
Anthony Lio 9f690f045a test(docs): drop removed all agent from AgentSetup test (#50833) 
## Problem

#50784 removed the `all` monitoring agent, but `AgentSetup.test.ts`
still tests it making docs PR opened since fails that check

## Solution

- removes `all` from the `it.each` list

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

2. run `cd apps/docs && pnpm exec vitest run
internals/markdown-schema/AgentSetup.test.ts`

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Tests**
* Updated the monitoring agent schema test to cover health, security,
performance, and usage agents; the existing checks remain unchanged.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-24 17:57:28 +03:00
Anthony Lio ef0f7f2b3d feat(docs): updates codetabs ui (#50734) 
## Problem

codetab feels inconsistent vs its codeblock (radii + border_

## Solution

this pr is a proposal to update the codetab ui to convey proximity from
file name and its code

| state | preview |
| -------|------|
| before | <img width="822" height="482" alt="image"
src="https://github.com/user-attachments/assets/03addd77-37a3-4887-b7ba-9482bb5920e9"
/> |
| after | <img width="822" height="482" alt="image"
src="https://github.com/user-attachments/assets/670e92be-d90c-45db-965c-7c80e77cdd9e"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. visit
`/docs/guides/getting-started/quickstarts/nextjs#6-allow-public-access-to-the-instruments-page`

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
  * Refined named code block styling in the documentation.
* Updated label spacing, borders, colors, and corner rounding for
improved visual alignment with code examples.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 21:45:35 +03:00
Anthony Lio 5918a69398 feat(docs): agent prompt block (#50565) 
## What kind of change does this PR introduce?

docs ui polish for the prompt panel on the docs homepage and in the
quickstarts

## What is the current behavior?

agent prompt renders as one run on paragraph steps read as "1. ... 2.
... 3. ..." inline making it hard to read

## What is the new behavior?

- sets prompt bodies as markdown for easier readability
- adds long prompts collapse
- removes panel tab icons
- uses panel code block ui
- makes active tab has an underline on first paint
 
 `home`
| state | preview |
| -------|------|
| before | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9"
/> |
| after | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9"
/> |

`quickstart`
| state | preview |
| -------|------|
| before | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de"
/> |
| after | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
* Prompts now support Markdown formatting, inline code chips, expandable
content, and improved hover-reveal behavior.
* Code-copy controls support customizable labels and clearer
screen-reader announcements.
* Prompt tabs and panels have updated styling, spacing, and
active-content handling.

* **UI Improvements**
* Setup and agent prompts now use consistent Markdown-rendered
presentation.
  * Prompt headings now display “Agent Prompt.”
  * Home page setup code blocks use a more compact layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 21:54:31 +03:00
Anthony Lio 986931184c fix(docs): kotlin codeblock sticky collision (#50566) 
## What kind of change does this PR introduce?

bug fix in kotlin documentation

## What is the current behavior?

on scroll within the kotlin documentation, in the installing section a
codeblock collide with the one below

## What is the new behavior?

- fixes by updating mdx markup

| state | preview |
| -------|------|
| before | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/29332b51-dd88-458c-be12-c450ae6d32f1"
/> |

## Test
1. visit [kotlin
documentation](https://supabase.com/docs/reference/kotlin/installing)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Improved the layout of Ktor installation guidance by separating engine
setup instructions from the multiplatform example.
- Applied the updated structure consistently across Kotlin installation
documentation versions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 21:43:08 +03:00
Anthony Lio 222127b5c2 fix(ui-patterns): multi select cropped caret + extra padding (#50323) 
## What kind of change does this PR introduce?

bug fix on multi select ui patterns component following up with #49986

## What is the current behavior?

- extra left padding on medium size
- cropped caret on tiny size

## What is the new behavior?

- updates multi select style padding + caret
- refactors test

`caret`
| state | preview |
| -------|------|
| before | <img width="594" height="362" alt="image"
src="https://github.com/user-attachments/assets/14af14f6-348a-44be-b0ae-42fdb9a4f4ce"
/> |
| after | <img width="594" height="362" alt="image"
src="https://github.com/user-attachments/assets/44dab5ae-944d-43fe-8c4e-0af44a0e1fc7"
/> |

`padding`
| state | preview |
| -------|------|
| before | <img width="594" height="362" alt="image"
src="https://github.com/user-attachments/assets/b1ad7f66-9952-463d-aebb-01fee8748aef"
/>|
| after | <img width="594" height="362" alt="image"
src="https://github.com/user-attachments/assets/a5891c45-67b3-4926-97c5-a2ad7027bd5c"
/> |


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Multi-select triggers now display the selected value while retaining
the placeholder when empty.
* Improved sizing, spacing, and minimum widths across multi-select
controls for more consistent layouts.
* Delete controls now provide clearer click targets and hover feedback.
* Decorative chevron icons are hidden from assistive technologies for
improved accessibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 10:38:27 +03:00
Anthony Lio 85f19367ec fix(ui): button popup layout shift on click (#50468) 
## What kind of change does this PR introduce?

Bug fix on ui button component

## What is the current behavior?

button scale transition is applied when a popup get displayed causing a
slight layout shift (popup position change on active state)

## What is the new behavior?

- prevents scale transition on button displaying popup

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/d736f27c-0d0e-4dfa-877f-6b22a09db15e"
/> |
| before | <video
src="https://github.com/user-attachments/assets/762de503-ac54-48cb-b689-8a0f8e83cc4c"
/> |

## Test
1. visit `/project/default/explorer/query/${id}` or `
/docs/guides/ai-tools/mcp`


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Dropdown and other menu-trigger buttons no longer shrink when clicked.
  * The press-scale animation remains available for standard buttons.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 08:51:09 +03:00
Anthony LioandAli Waseem 7fb2e8cd42 fix(docs): repeated shiki grammar registration (#50501) 
## What kind of change does this PR introduce?

bug fix alternative to #50492

## What is the current behavior?

[#50239](https://github.com/supabase/supabase/pull/50239) introduced
repeated shiki grammar registration. duplicate injection rules
accumulate between code blocks, slowing later tutorials enough to hit
the 60-second build timeout

## What is the new behavior?
- reuses one highlighter with all languages loaded once
- restores previous highlighting approach + startup cost while keeping
the page-size savings

replay | before #50239 | after #50239 | this pr
-- | -- | -- | --
cold, including initialization | 2.99 s | 6.96 s | 2.94 s
warm | 0.37 s | 5.90 s | 0.36 s




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Enhancements

* Code blocks now preload syntax highlighting for all supported bundled
languages, including SQL, Markdown, and TypeScript.
* Highlighting uses a shared configuration and theme for consistent
rendering across code blocks.
* Concurrent code block renders share a single highlighter
initialization.
* Language handling and syntax-highlighted output are more consistent
across supported, unsupported, aliased, and plain-text code blocks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
 2026-09-17 07:07:35 -06:00
Anthony LioandDanny White 38f448b01c fix(ui): tab component (#50183) 
## What kind of change does this PR introduce?
bug fix on tab component + a small refactor

## What is the current behavior?

the active tab in an underline list gets border-b-2 while its siblings
get nothing, so it's 2px taller and its label sits higher than the rest
causing a smol layout shift within docs

## What is the new behavior?

- adds one absolute positioned bar that slides between tabs so nothing
moves
- favors track under an underline as an inset shadow vs a border

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/b73820a6-2994-46d1-aa98-452681f0fef2"
/> |
| after | <video
src="https://github.com/user-attachments/assets/054cd67d-a50c-4aef-9340-a1e1d515047b"
/> |


## Test
1. visit [api
reference](https://docs-git-antlio-ui-components-tabs-supabase.vercel.app/docs/reference/javascript/installing?platform=npm&queryGroups=platform)
2. visit a [guide
](https://docs-git-antlio-ui-components-tabs-supabase.vercel.app/docs/guides/database/prisma)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added an animated tab indicator that follows the active tab and adapts
to layout changes.
  - Added support for customizing tab indicator styling.
- Respects reduced-motion preferences by disabling indicator transitions
when appropriate.

- **Style**
  - Streamlined tab borders, spacing, and underlined-tab styling.
- Improved tab panel spacing and standardized tab behavior in
documentation examples.
- Centralized easing behavior for smoother overlays, dropdowns, slides,
and panels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
 2026-09-16 00:00:27 +03:00
Anthony Lio 6d08a747f1 fix(docs): guide reference perf enhancements (#50239) 
## What kind of change does this PR introduce?

follow-up to #50235 to reduce reference page payloads and cold rendering
overhead

## What is the current behavior?

reference pages ship a large rsc payload inside the html _ most of it is
duplication rather than content along with shiki that writes ~30
character css variable name for every syntax token making the page heavy
in some cases

## What is the new behavior?

- moves repeated styles into shared css and uses compact, namespaced
token classes
- renders details icons inside the client trigger
- follows shiki’s guidance to [reuse one
highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance)
and [load languages on
demand](https://shiki.style/guide/best-performance#use-shorthands)

`page size`
page | before | after | change
-- | -- | -- | --
javascript | 10.61 mb | 8.28 mb | -21.9%
dart | 4.59 mb | 4.13 mb | -10.1%
python | 4.38 mb | 3.73 mb | -14.9%
swift | 2.87 mb | 2.56 mb | -10.9%
server | 1.59 mb | 1.35 mb | -15.2%
kotlin | 3.42 mb | 3.17 mb | -7.2%

`cold initialization`
language | before | after | reduction
-- | -- | -- | --
bash | 2,180 ms | 23 ms | 98.95%
javascript | 2,245 ms | 38 ms | 98.29%

## Additional context

measured on a local production build which uses the checked in generated
content _ production has larger sdk data, so absolute sizes there will
be higher

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added reusable expand/collapse controls for API reference details,
with updated icons, labels, and styling.
* Improved code block rendering with class-based syntax highlighting,
wrapped-code support, responsive layouts, and lazy language loading.

* **Style**
* Added theme-aware syntax-token colors, line-number styling, and
configurable code-block shadows.
  * Consolidated expandable reference panel and item styling.

* **Tests**
* Added coverage for syntax highlighting, code block rendering, language
support, token stability, and reference details.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-15 23:55:49 +03:00
Anthony Lio 819df2ae4d feat(www): menu nav enhancements (#50282) 
## What kind of change does this PR introduce?

feature reworks the www header dropdowns

## What is the current behavior?

menu dropdown navigation animation between items feels scattered

## What is the new behavior?

- adds dropdown card resize with a transition and the content crossfades
when switching
- removes dead zone between or under nav items
- sets card is centered on the screen + enhance tablet bp
- adds slight ui refresh spacing, colors, sizes

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/acd8e161-a697-4070-b751-4f4e9f1eab19"
/> |
| after | <video
src="https://github.com/user-attachments/assets/fe403afd-0074-4cb5-9223-fd6cdd2f7d5a"
/> |



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Navigation dropdowns now provide smoother directional transitions,
keyboard-focus states, and reduced-motion support.
* Product navigation is organized into clearer Products and Modules
sections.
* Navigation layouts adapt earlier across screen sizes with responsive
two-column arrangements.

* **Style**
* Updated dropdown spacing, colors, borders, menu item styling, and
customer imagery sizing.
  * Refined blog loading placeholders with slightly tighter spacing.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-14 15:51:39 +03:00
Anthony Lio 42f1401769 fix(ui-patterns): a11y accessible names for ExpandableVideo (#50226) 
## What kind of change does this PR introduce?

bug fix a11y `ExapndableVideo` 

## What is the current behavior?

`ExpandableVideo` blurred thumbnail has `alt="Video guide preview"`
sitting behind an overlay that already reads "Watch video guide" making
screen readers announcing the same thing twice

## What is the new behavior?

- adds an optional `videoTitle` prop that names the video once and feeds
both the button's `aria-label` and the player's `title`.

## Test
1. visit `/docs/guides/functions`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Enhancements**
  - Video previews in guides now display the relevant guide title.
  - Partner introduction videos now include a descriptive title.
- Video controls and embedded players provide more specific
accessibility labels when titles are available.
- Preview images without meaningful alternative text are treated as
decorative to reduce redundant screen-reader output.
- **Bug Fixes**
- Guide titles with Markdown formatting now appear as clean, readable
text in video labels.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 23:37:52 +03:00
Anthony Lio 71d652483e fix(docs): youtube iframe lack titles (#50225) 
## What kind of change does this PR introduce?

a11y bug fix on youtube embed

## What is the current behavior?

YouTube iframes across guide pages have no `title` attribute, so screen
readers announce them as an unnamed frame

## What is the new behavior?

- extracts a `YouTube.tsx` ui component
- adds `<YouTube id title />` + `title` as a required prop

## Test
1. visit `/docs/guides/ai/examples/openai`


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Documentation**
- Standardized embedded YouTube videos across guides with a consistent
video player.
  - Added descriptive titles to improve accessibility and clarity.
  - Preserved existing video content and playback behavior.
- Updated video embeds across AI, authentication, database, functions,
realtime, self-hosting, storage, and migration documentation.
- **New Features**
- Added privacy-enhanced YouTube playback for embedded documentation
videos.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 23:37:52 +03:00
Anthony Lio 3de0e3a614 fix(docs): a11y alt text on Colab badge (#50222) 
## What kind of change does this PR introduce?

a11y fix

## What is the current behavior?

Colab badge image is missing alt attribute leaving both image and the
link unnamed _ screen reader users have no way to tell what the link
does

## What is the new behavior?

- adds `alt="Open in Colab"`, matching the text rendered inside the SVG
so voice control users can activate it by its visible label

## Test
1. visit
[/docs/guides/ai/google-colab](https://supabase.com/docs/guides/ai/google-colab)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Improved accessibility across AI guides and quickstarts by adding
descriptive alternative text to “Open in Colab” badge images.
- Updated Google Colab, LlamaIndex, face similarity, hello world, and
text deduplication documentation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 17:42:27 +03:00
Anthony Lio 2e861b5415 fix(docs): guides table overflow (#50221) 
## What kind of change does this PR introduce?

bug fix of table usage within guides

## What is the current behavior?

table markup is used within the observability guide causing overflow of
the content

## What is the new behavior?

favors table component usage within mdx guide to fix the overflow and
enable scroll

| state | preview |
| -------|------|
| before | <img width="1171" height="668" alt="image"
src="https://github.com/user-attachments/assets/bdbb905e-0ea9-4cde-b20b-84b4ef9a4137"
/> |
| after | <img width="1171" height="668" alt="image"
src="https://github.com/user-attachments/assets/9e062222-1dad-49da-bdbe-616d89703301"
/> |

## Test
1. visit
[/docs/guides/observability/log-field-reference](https://supabase.com/docs/guides/observability/log-field-reference?queryGroups=source&source=edge_logs)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
  - Improved table rendering in the log field reference documentation.
- Updated documentation tables to use the shared table presentation for
a more consistent layout.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 17:40:53 +03:00
Anthony Lio c145f3e046 fix(docs): guide nav collapsible parity (#49945) 
## What kind of change does this PR introduce?

visual parity fix and refresh + component extraction (stacked on #49942)

## What is the current behavior?

guide and reference sidebars each hand-roll their own collapsible
section visuals

## What is the new behavior?

- adds `NavSection` composition components (`NavSectionCaret`,
`NavSectionContent`, `NavSectionList`) shared by both navs via radix
`asChild`, so the rail, caret, and motion have a single source of truth
- fixes ui drift between both so navs get the same left rail beside
expanded children, the same caret and animation
- enhances link click area so space between rows is part of the click
target

| state | preview |
| -------|------|
| before | <img width="430" height="288" alt="image"
src="https://github.com/user-attachments/assets/0052d4b7-7793-43cf-8416-2a5445b95148"
/> |
| after | <img width="430" height="288" alt="image"
src="https://github.com/user-attachments/assets/42713ee3-e147-4e53-a58d-3f3de278264d"
/> |

## How to test?

1. run `pnpm dev:docs`
2. open [guide
page](http://localhost:3001/docs/guides/integrations/build-a-supabase-oauth-integration)
3. open [reference
page](http://localhost:3001/docs/reference/dart/introduction)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Added animated expand/collapse behavior and rotating caret indicators
to documentation navigation sections.
  * Added active-child indicators for clearer navigation context.

* **Improvements**
* Standardized spacing, borders, and animation styles across guide and
reference navigation.
* Improved collapsible animations to support varying content sizes more
reliably.
* Navigation items without links or child content, including disabled
nested items, are no longer displayed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 15:03:55 +03:00
Anthony Lio bdd4b8d369 fix(docs): guides sidebar a11y elements (#49942) 
## What kind of change does this PR introduce?

bug fix (accessibility) + test coverage

## What is the current behavior?

the guides sidebar renders invalid list markup: group headers and
dividers sit directly under the root `ul`, and accordion links render as
`li` elements without an owning list

fixes
[DOCS-1279](https://linear.app/supabase/issue/DOCS-1279/guides-sidebar-put-li-elements-directly-in-the-ul)

## What is the new behavior?

- sidebar renders a semantic hierarchy: every `ul` has only `li`
children, every `li` has an immediate list parent, and the menu header
sits outside the item list. pure markup change,
- docs e2e scans the guide navigation separately from the article and
blocks the `list` and `listitem` axe rules there against sample pages
that include different usages (flat links, grouped links, nested
accordion)

## How to test?

run the docs dev server, then the scoped a11y suite:

```bash
pnpm dev:docs
pnpm e2e:docs:a11y
```

## Follow up
visuals and behavior are unchanged here but better parity between
guide/reference is handled in the stacked pr

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved documentation navigation rendering for nested guide items,
active states, and disabled entries.
* Ensured navigation groups and child links use valid, testable list
structures.

* **Tests**
* Added coverage verifying that guide navigation changes run the
appropriate documentation pages.
* Confirmed unrelated documentation changes can be skipped by the
end-to-end workflow.

* **Chores**
* Updated documentation test scope detection to include guide navigation
changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 15:03:55 +03:00
Anthony Lio 5d78b1da1a fix(docs): a11y projectconfigvariables (#50002) 
## What kind of change does this PR introduce?

bug fix for accessibility, fixes
[docs-1280](https://linear.app/supabase/issue/DOCS-1280/projectconfigvariables-label-the-readonly-inputs-and-name)

## What is the current behavior?

the project url and api key fields in `ProjectConfigVariables` have no
associated label, so a screen reader announces an edit field with no
indication of which value it holds

## What is the new behavior?

- associates a `<label>` with each readonly input, so the fields
announce as "project url" and "publishable key"
- names each copy button after the value it copies
- drops `role="combobox"` from the trigger, keeping the `aria-haspopup`,
`aria-expanded` and `aria-controls` radix already supplies
- names the trigger from its content instead of `aria-label`, so it
announces the current selection
- names the shared `CommandInput` reset button and hides its icons

## test

- `pnpm dev:docs`
- `/docs/guides/getting-started/quickstarts/nextjs` (`url` +
`publishable`)
- `/docs/guides/auth/server-side/creating-a-client`, branch selector,
needs a branching-enabled project
- `/docs/guides/observability/log-drains`
- `api_settings` in any getting-started quickstart

## Additional context

reverses part of #49952 as that pr added `aria-label` to satisfy
`button-name`, but did replace the accessible name rather than adding to
it _ the sr-only prefix added here keeps the rule passing and announces
the selection

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Accessibility**
* Improved screen reader support for variable configuration controls,
including clearer labels and copy-status announcements.
* Enhanced combobox and search interactions with accessible labeling,
empty-result announcements, and clearer reset-button names.
* Decorative icons and visual-only messages are now hidden from
assistive technologies.
* **Tests**
* Added accessibility coverage for search input icons and the
clear-search control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 13:22:00 +03:00
Anthony Lio de2f8bbd03 fix(docs): prima guide yarn panel display npx (#50186) 
## What kind of change does this PR introduce?

bug fix in prisma guide page code example

## What is the current behavior?

yarn panel display `npx` command in code example

## What is the new behavior?

favor `yarn` command in yarn panel code example

| state | preview |
| -------|------|
| before | <img width="760" height="315" alt="image"
src="https://github.com/user-attachments/assets/d7dc9004-9618-48ff-9b6c-4b7da4e8c44e"
/> |
| after | <img width="760" height="315" alt="image"
src="https://github.com/user-attachments/assets/a7cee65f-2038-4f5a-81e3-1cb627cb73b9"
/> |

## Test
1. visit `/docs/guides/database/prisma`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Updated Yarn Prisma command examples to use Yarn-specific syntax for
project initialization, migrations, database pulls, migration diffs,
migration resolution, and client generation.
  * npm, pnpm, and Bun examples remain unchanged.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 10:58:37 +03:00
Anthony Lio e6bd407e88 fix(docs): collapsible details component (#50065) 
## What kind of change does this PR introduce?

nitpick ui bug fix in docs of the collapsible details component +
commentary

## What is the current behavior?

1. data / response / notes collapsibles on reference pages grow taller
when you expand them + also get double padding: the panel pads the
content, and the code block pads itself again inside it

2. commentary that follows a snippet in the example column renders
unstyled, since that column has no prose context. it comes out larger
than the description column and inline code stays as plain text

## What is the new behavior?

├ adds `CodeBlock` a `compact` variant that get appropriate styling when
used within collapsible

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/8b70e1c6-9e0e-4371-a2b2-eb4a3d580247"
/> |
| after | <video
src="https://github.com/user-attachments/assets/1e5cdd46-ce7d-4d2d-ac6a-6da680df37e5"
/> |

├ wraps example column in prose so trailing commentary matches the
description font size + inline code styling

| state | preview |
| -------|------|
| before | <img width="1142" height="404" alt="image"
src="https://github.com/user-attachments/assets/8d0f1ac0-087d-47f7-b35d-b8798d589fdb"
/> |
| after | <img width="1142" height="404" alt="image"
src="https://github.com/user-attachments/assets/b9ba4202-a8dd-407d-b535-f34d83f5b24b"
/> |

## Test
- visits `/docs/reference/javascript/using-filters-gt`
- visits `/docs/reference/server/middleware-withsupabaseadminclient`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Documentation code blocks can now be displayed in a compact format
without borders or extra spacing.
- Reference documentation supports customizing code block presentation.
- **Style**
- Improved formatting for example content, including prose wrapping,
spacing, and code block margins.
- Refined collapsible documentation sections with clearer spacing, hover
and focus states, and open/close animations.
- Code-only collapsible content now uses a more compact layout, while
text content receives consistent typography and padding.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 10:54:21 +03:00
Anthony Lio b8b92fe566 fix(www): careers page error (#50185) 
## What kind of change does this PR introduce?

bug fix careers page on anchor link click

## What is the current behavior?

on `/careers`, clicking "open positions", scrolling down and back up,
then clicking it again crashes the page

## What is the new behavior?

destructuring defaults on the page props, so an empty-props render is
harmless instead of fatal _ prefetch still returns `{}`, but the
sequence now renders normally instead of throwin

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved the careers page so it renders correctly when job listings,
placeholder job details, or contributor information are unavailable.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 10:15:30 +03:00
Anthony Lio c708e1128f fix(ui-patterns): reveal hover-only copy controls on keyboard focus (#50083) 
## What kind of change does this PR introduce?

bug fix + a11y _ follow-up to the UI review on #50045

## What is the current behavior?

**`CodeBlock`**: the copy control lives in an `opacity-0
group-hover:opacity-100` wrapper with no focus rule, so it stays
invisible when a keyboard user tabs to it, button is focusable and
pressable, just not visible

**`DataInputs/Input`**: same wrapper, but the parent `InputGroup`
declares a *named* group (`group/input-group`), so the unnamed
`group-hover:` matched nothing. With `showCopyOnHover` the button was
invisible at all times, hover included. Only consumer today is the Edge
Functions "Download via CLI" popover.

## What is the new behavior?

├  adds `group-focus-within:opacity-100` to `CodeBlock`

| state | preview |
| -------|------|
| before | <img width="800" height="450" alt="image"
src="https://github.com/user-attachments/assets/04645fbd-3b43-4291-afe3-ba56ab961dac"
/> |
| after | <img width="800" height="450" alt="image"
src="https://github.com/user-attachments/assets/880b49aa-2244-4b78-9fbd-f554770e3a3b"
/> |

├ retargets both variants at the named group: `group-hover/input-group:`
+ `group-focus-within/input-group:` in `Input`

| state | preview |
| -------|------|
| before | <img width="542" height="261" alt="image"
src="https://github.com/user-attachments/assets/0ff85a85-5ef8-41e4-a3f0-34f7982770c4"
/> |
| after | <img width="542" height="261" alt="image"
src="https://github.com/user-attachments/assets/8ce84ea7-bcb6-47ba-a7e6-a35f6edbd332"
/> |


## Testing
1. visits `/docs/guides/ai-tools/plugins#manual-installation`
2. tabs into the code block

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Accessibility Improvements**
- Copy buttons in code blocks and input fields are now revealed when the
component or its contents receive keyboard focus, in addition to
appearing on hover.
  - Improved keyboard discoverability and access to copy actions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 09:14:42 +03:00
Anthony Lio 45199443c8 fix(ui): admonition component parity (#49925) 
## what is the current behavior?

admonition icon <> text not optically aligned + rendered differently in
docs and the design system _ docs showed admonition text at 15px/28px
because the page's prose styles reached inside the component, while the
same callout was 13px in the design system _ lists

## what is the new behavior?

- the title offset is now conditional. a title and body copy have
different line heights, so they need different nudges to sit level with
the icon.
- fixes list markers and the ordered-list chip alignment inside
callouts.
- removes `.admonition-content` css that nothing referenced
- fixes 5 admonition titles that were not capitalized.

| state | preview |
| -------|------|
| before | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/2fffb183-81e2-4eff-8f0d-8a07649390e8"
/> |
| after | <img width="902" height="279" alt="image"
src="https://github.com/user-attachments/assets/22abe3ed-fd6d-49ac-aa37-4292bca5850a"
/> |

## follow ups

- better composition: title, description and actions are still props _ a
compound api (`Admonition.Title`, `Admonition.Actions`) would remove the
`childProps` escape hatch


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Improved capitalization of note and warning titles in the Metabase and
Prisma guides for consistency.
* Updated the contributing guide’s table of contents to exclude feedback
headings.
  * Improved heading structure for the documentation feedback section.

* **UI Improvements**
* Refined admonition and alert typography, spacing, list formatting, and
ordered-list alignment.
* Improved content spacing when titles, descriptions, or icons are
present.
  * Updated action links and buttons for more consistent sizing.
  * Adjusted alert content styling for a clearer presentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-08 14:31:30 +03:00
Anthony Lio 84d3ce1bd2 fix(docs): keep code block line numbers sticky while scrolling (#49962) 
## What kind of change does this PR introduce?

bug fix + some ui polish on the docs code block

## What is the current behavior?

line numbers scroll away with the code _ so you lose your place in any
block wide enough to scroll _ the gutter is also see-through so scrolled
code renders interleaved with the numbers

## What is the new behavior?

- makes gutter sticky and stays pinned while the code scrolls (no
rubber)
- fixes gutter, row hover, and button backgrounds as opaque so nothing
bleeds through
- adds gutter right edge fades vs bg
- adds right padding so line endings clear the buttons
- adds press feedback on the shared in-house `Button` gated behind
`motion-safe`

| state | preview |
| -------|------|
| before | <img width="566" height="263" alt="image"
src="https://github.com/user-attachments/assets/81778815-1f15-4ea5-a647-ed48418210e8"
/> |
| after | <img width="566" height="259" alt="image"
src="https://github.com/user-attachments/assets/b7d770c5-4156-491f-93c8-b0d900b7dc85"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **UI Improvements**
* Refined code block controls with consistent styling, active states,
animated icons, and automatic copy-status reset.
* Improved code block line-number presentation with hover effects,
sticky gutters, spacing, shadows, and smoother horizontal scrolling.
* Added smoother button transitions and a subtle pressed-state
animation.
* Respect reduced-motion preferences by disabling icon animations when
requested.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-08 14:07:17 +03:00
Anthony Lio 085d218bff fix(docs): button a11y enhancements (#49952) 
## What kind of change does this PR introduce?

bug fix for accessibility, fixes
[docs-1265](https://linear.app/supabase/issue/DOCS-1365/add-aria-label-to-icon-only-buttons-button-name)

## What is the current behavior?

some controles in the docs app have no accessible name, so screen
readers announce them as an unlabelled "button"

## What is the new behavior?

- adds each control a name the way its neighbours already do
- adds menu toggle a state-dependent `aria-label` and `aria-expanded`
- adds `button-name` to `enforced_rules`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Accessibility**
- Added descriptive labels to configuration selectors and mobile menu
controls.
- Mobile menu controls now announce whether the menu is open or closed.
- Expanded accessibility validation to check button names across
documentation pages.

- **UI Improvements**
- Updated the raw throughput table control with a clearer button
appearance and expandable chevron indicator.
  - Replaced a schema-migration tooltip with a direct in-page link.

- **Documentation**
- Removed the Info Tooltip component guidance from the contributing
documentation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-04 10:32:57 +03:00
Anthony Lio e25c0e83df fix(docs): table bottom border color missing (#49955) 
## What kind of change does this PR introduce?

bug fix on table ui in docs

## What is the current behavior?

currently a recent change in
[#47288](https://github.com/supabase/supabase/pull/47288/changes#diff-57e15cf799459c10344c86d8ec797a16f0d3e824386e85552cb653594f7e616aR118)
made table bottom border color dimmed down vs others.

## What is the new behavior?

- fixes bottom border by targeting only border within the table (if that
was the initial intent?)

| state | preview |
| -------|------|
| before | <img width="787" height="320" alt="image"
src="https://github.com/user-attachments/assets/70eac743-255d-4848-9488-752e91a8793e"
/> |
| after | <img width="787" height="320" alt="image"
src="https://github.com/user-attachments/assets/e307dc33-6247-4f36-89d0-75d1eb1aef4e"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined table styling so bottom borders appear only between body rows,
removing the border from the final row.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-04 07:57:32 +03:00
Anthony Lio aa393fdb73 chore(docs): add Anthony Lio to humans.txt (#49758) 
## What kind of change does this PR introduce?

add new entry in `humans.txt` file

## What is the current behavior?

idle

## What is the new behavior?

˗ˏˋ Anthony Lio ˎˊ- in `humans.txt`



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
  * Added Anthony Lio to the team member listing.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-02 20:04:42 +03:00
Anthony Lio 27a4421d6e fix(docs): stop sidebar from jumping on scroll (#49807) 
## What kind of change does this PR introduce?

bug fix to stop sidebar jump on scroll within docs

## What is the current behavior?

the docs sidebar shifts up by 1px as soon as scrolling start as the top
bar height include bottom border causing the jump as height token differ
from the whole height

## What is the new behavior?

favor box shadow instead of a border for the bottom line, so height
matches the token and nothing needs to compensate any more which allows
to remove some `+1px` elsewhere

+ also drops a nested `lg:sticky` in the sidebar that did nothing inside
an already-sticky parent

| state | preview |
| -------|------|
| before | <video
src="https://github.com/user-attachments/assets/b4bbfa2d-6595-4711-bb2b-bd2bf3aded8a"
/> |
| after | <video
src="https://github.com/user-attachments/assets/f044aebc-ef14-42c1-8564-3b290399d00b"
/> |

## Additional context

- header now uses the existing `subhighlight-border` utility, which was
not used anywhere else it seems, could also be renamed?
- could be down the other way by keeping border and fixing the jump

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Improved documentation navigation alignment by removing unnecessary
spacing from sticky sidebars, table of contents, and section headings.
* Updated desktop navigation behavior for more consistent scrolling and
viewport layout.
* Refined the top navigation bar’s border styling for a cleaner
appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-01 22:04:41 +03:00
Anthony Lio 55385adad5 fix(docs): fix tab bar overlapping code blocks (#49775) 
## What kind of change does this PR introduce?

bug fix: removes `<$CodeTabs>` from
[declarative-database-schemas.mdx](https://github.com/supabase/supabase/blob/master/apps/docs/content/guides/local-development/declarative-database-schemas.mdx)
following up with #49263

## What is the current behavior?

on
[/declarative-database-schemas](https://supabase.com/docs/guides/local-development/declarative-database-schemas#declaring-your-schema)
the tab bar above each step code block overlaps the code below it

every step wraps code in `<$CodeTabs>` but carries a `-mb-6` expecting
the code default margin to absorb it, while `StepHikeCompact` zeroes™ it

note: it's the only page nesting `<$CodeTabs>` inside a step

## What is the new behavior?

| state | preview |
| -------|------|
| before | <img width="795" height="417" alt="image"
src="https://github.com/user-attachments/assets/d3d65f57-d621-4d5a-a3f9-229f5908cdf7"
/> |
| after | <img width="795" height="417" alt="image"
src="https://github.com/user-attachments/assets/f3dc9f2d-fd4b-4ebd-95b4-63de587604fb"
/> |

## Additional context

could go the other way and add `<$CodeTabs>` to those two guides for
consistency but that would need StepHikeCompact to take another !
utility to restore it, but not against it if feels better.
 2026-09-01 17:15:55 +03:00