## What
Restores the email template **source editor** height, which had
collapsed to a single line.
## Root cause
Earlier today, #47339 ("prevent Monaco editor collapse after visiting
GraphiQL") appended `h-full` to the shared `CodeEditor`:
```ts
className={cn(className, 'monaco-editor', 'h-full')}
```
`cn` is `twMerge(clsx(...))`. tailwind-merge resolves conflicting height
utilities by keeping the **last** one, so the trailing `h-full`
clobbered any caller-supplied height. The email template editor
(`TemplateEditor.tsx`) passes `h-96`, and its wrapper has no explicit
height — so `h-full` resolved to 0 and the editor collapsed to a single
line.
## Fix
Reorder so `h-full` is a default that a caller's height wins over:
```ts
className={cn('monaco-editor', 'h-full', className)}
```
- Email editor passes `h-96` → comes last → wins → 384px height
restored.
- Callers that set no height (GraphiQL, etc.) → `h-full` still applies →
#47339 fix preserved.
## Testing
- [ ] Email template source editor renders at full height again
- [ ] GraphiQL → editor navigation still does not collapse
Fixes FE-3728
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved editor sizing so custom height classes are respected instead
of being overridden by the default full-height styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes a pre-existing bug where visiting **GraphiQL** leaves the **SQL
editor** (and other Monaco editors) collapsed to a ~5px slit with the
background spilling over it, until a full navigation away.
## Root cause
GraphiQL (`@graphiql/react`) and the rest of Studio's editors
(`@monaco-editor/react`) share one global Monaco instance. Visiting
GraphiQL does `import 'graphiql/style.css'`, which injects a **second
copy of Monaco's CSS** globally and persists for the session.
`CodeEditor` hard-codes a `monaco-editor` class onto the
`@monaco-editor/react` **wrapper** div (it's not a real Monaco editor —
Monaco creates its own `.monaco-editor` inside it). That makes the
wrapper subject to global `.monaco-editor` rules. After GraphiQL's CSS
loads, the wrapper flips from `position: relative` to `position:
absolute`, drops out of the flex flow, and collapses to `height: 0`.
Monaco then lays out against a 0-height container → ~5px editor, and the
full-size gutter/background layers spill over the area.
Confirmed by inspecting the same wrapper before vs after a GraphiQL
visit — identical inline styles, but `position` flips `relative` →
`absolute` and height `266px` → `0`.
## Fix
Add `h-full` to the wrapper so it fills its (full-height) section even
when it's `position: absolute`, instead of collapsing to 0. Monaco then
measures the correct height. In the normal `relative` state this is
identical to the existing flex-stretch behavior.
This is the contained fix. The deeper fix is isolating GraphiQL's Monaco
from the shared instance (so it can't inject CSS / mutate global state
affecting other editors) — larger, worth a follow-up.
## To test
- Open the SQL editor (renders fine).
- Go to Integrations → GraphiQL, then back to the SQL editor.
- Editor should be full height and fully visible (previously a ~5px slit
covered by the background).
- Sanity-check other editors that use `CodeEditor` (e.g. RLS policy
editor, function editor) still render at the right height.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved the code editor’s sizing so it keeps its full height during
navigation and no longer collapses to a near-zero display in some cases.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Context
More clean up / housekeeping - to use `CodeEditor` in `AIEditor` and
remove duplicated logic
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Expanded supported editor file types, including CSS, CSV, and
JavaScript (with improved syntax highlighting).
* The updated editor experience now provides a readily available “run
query” action.
* **UI Improvements**
* Tightened editor panel spacing and adjusted padding for a cleaner
layout.
* **Bug Fixes**
* Improved file-to-language detection so files open with the correct
syntax highlighting more consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Part of consolidating all our code editors - removes all direct renders
of the `Editor` component and use `CodeEditor` instead
## UIs affected
- [ ] Query performance advisor -> query block
- [ ] Table Editor -> Table definition
- [ ] Table Editor -> Text + JSON editor (From RowEditorSidePanel,
expand input field)
- [ ] Auth -> RLS -> Create/edit policy code sections
- [ ] Storage policies -> Anywhere that has a code section
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Rolled out a consistent PostgreSQL code editor experience across
policy, storage policy, trigger function, table definitions, and query
performance screens.
* Updated policy/template previews to use the shared editor for cleaner
read-only viewing.
* **Bug Fixes**
* Removed extra left padding in the query performance editor wrapper.
* Improved the JSON editor action control with clearer icon behavior.
* **Refactor**
* Standardized editor usage by replacing legacy SQL/Monaco-based editors
with the shared CodeEditor and simplifying related editor components.
* Updated CodeEditor capabilities (read-only handling, wrapper styling,
markdown support) and tightened editor prop contracts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Part of efforts to consolidate all the code editors that we have in the
repository
`CodeEditor` will serve as the base monaco editor file that all UIs
should consume from
It's aimed to be generic and just stores the common logic that will be
generally used where-ever we need a code editor (editor options, base
editor set up on mount, etc)
The idea is that `CodeEditor` holds just 3 default actions (run queyr,
format document and placeholder fill)
If any editor needs specific behaviours (e.g SQL Editor), they can
declare them in the `onMount` prop of `CodeEditor` which gives some
flexibility
## Changes involved
- Use `CodeEditor` component for SQL Editor's `MonacoEditor`
- Shifted Cmd K behaviour into `CodeEditor` since that's probably needed
everywhere that we render that UI
- Deprecate `MonacoEditor` from the table editor's `grid` folder
- All files that were using that component to use `CodeEditor` component
instead
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Migrated the studio’s code editing UI (including JSON, text, and
payload viewers) to a unified CodeEditor experience.
* **New Features**
* Added plaintext language support for read-only/truncated views.
* **Behavior Changes**
* Improved editor startup by setting cursor position consistently and
deferring autofocus.
* Streamlined editor context-menu actions to the core set (run query,
format, placeholder fill).
* Updated SQL editor wiring for more consistent command/menu and
selection handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- Most changes are related to either types or `useRef` usages (it now
requires an initial value).
- also updated `vaul` to its latest version and haven't noticed any
change ([design-system
demo](https://design-system-git-react-19-supabase.vercel.app/design-system/docs/components/drawer))
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Upgraded workspace to React 19.
* **Bug Fixes**
* Improved null-safety and ref handling across editors, UI components,
shortcuts, and markdown/image rendering to reduce runtime errors.
* Safer event/timeout/interval cleanup and more robust command/context
handling.
* **Chores**
* Bumped vaul dependency versions.
* **Documentation**
* Type and TypeScript accuracy improvements for clearer developer
feedback.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45886)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
## Context
Resolves FE-3077
Related discussion: https://github.com/orgs/supabase/discussions/45233
Verifying the correctness of your RLS policies set up has always been a
gap, as highlighted by a number of GitHub discussions like
[here](https://github.com/orgs/supabase/discussions/12269) and
[here](https://github.com/orgs/supabase/discussions/14401). As such,
we're piloting a dedicated UI for RLS testing (using role impersonation
as the base), in which you'll be able to
- Run a SQL query as a user (not logged in / logged in - this is the
role impersonation part)
- See which RLS policies are being evaluated as part of the query
- And hopefully be able to debug which policies are not set up correctly
Changes are currently set as a feature preview - and we'll iterate as we
get feedback from everyone 🙂🙏
<img width="613" height="957" alt="image"
src="https://github.com/user-attachments/assets/83c37f8a-28fc-43b3-b0ff-e28571d8710c"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* RLS Tester: run queries as anon or authenticated users, view inferred
SQL, per-table policy summaries, and data previews of accessible rows.
* UI preview: new RLS Tester preview card and modal with opt-in toggle;
RLS Tester sheet with role/user selector and query editor.
* SQLEditor: “Explain” tab is always visible.
* **Chores**
* Added supporting API endpoints, background checks for table RLS
status, and a local-storage flag to persist the preview opt-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* Bump Nextjs to v16.
* Fix studio issues.
* move docs graphiql css import to layout
* update sentry
* add missing docs package and fix imports
* only update studio
* ignore next-env.d.ts
* update bundle analyzer
* middleware to proxy
* update lockfile
* remove --turbopack dev flag as it's the default
* Import only types from the monaco editor.
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* Replace all usage of useProjectContext with useSelectedProjectQuery
* Replace all usage of useSelectedProject with useSelectedProjectQuery
* Replace all usage of useProjectByRef with useProjectByRefQuery
* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery
* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks
* Deprecate ProjecContext
* Bump the sql-formatter dependency.
* Add a function formatQuery which is a wrapper around sql-formatter.
* Replace all formatSQL features to use the new function formatSql.
* Remove unneeded RQ for formatting.
* Small fix.
* Add cmd i to close the assistant
* Update command in side nav
* Add kill switch for sending assistant prompts
* Add basic telemetry around quick sql editor assistant
* Fix
* Init AiAssistantPanel
* Temp
* Temp
* iterating on assistant ux
* More spiking
* Tweaking...
* Moar tweaking..
* Even more tweaking
* Tweek
* More tweaks
* Final tweaking...
* TWEAK
* Spelling
* Fix
* Assistant error handling and small bug fix in context for message
* Add feature flag
* Fix
* Address all feedback
* Minor
* Add vercel/ai. Commit additional next types.
* Add a API route in /app for streaming responses.
* Make the components work with streaming response.
* Add a dummy page to /app folder to fix a linking bug.
* Fix the dummy page.
* Fix the dummy page again.
* Add an empty layout to the app folder.
* Make the code snippets in the chat read-only.
* Remove queries and mutations for suggest.
* Reset the chat when closing the panel.
* Make the AI instructions a bit better.
* Don't render empty code blocks.
* Try to use remark for rendering the code. Style fixes for CodeBlock in AI assistant panel.
* Fix the styling of the definitions when sending them to OpenAI.
* Fix the css styling of the messages and code blocks.
* Move the suggest API route from app to pages folder.
* Revert the change for app API routes.
* Make the API route look like the rest of the API routes.
* Use Pre instead of Code because the <code> tags aren't working if between spans.
* Minor leftovers.
* Revert to using app route handlers.
* Change the wording on the diff header.
* Add nextjs types.
* Fix a missing import.
* Move AssistantChatForm back to db-new.
* Fix a build error.
* Rename the suggest route to assistant.
* Fix Joshen's comments.
* Add two more sizes to the Panel component.
* Add alias for the older openai-api library. The new one is added under the openai name.
* Add API routes
* Add components for the new AI RLS panel.
* Bunch of changes to the AI Policy Editor.
* Add a button for opening the new Policy Editor.
* Add a feature flag for the new editor.
* Add a confirmation modal when closing the panel.
* Fix leftover data when closing the panel.
* Make the copy button work.
* Add the next/swc packages to package-lock.json.
* Merge master
* Scaffold debug sql in rls editor
* Small improvements to policy chat
* Hook up debug to ai assistant panel
* Improve debug UX
* Add debug request badge
* Some styling fix
* Small styling fix
* Another small styling fix
* Shift create new policy ai button + fix error stylign with code editor height
* Add tooltips to apply changes and copy code from assistant message
* Hide assistant button is not platform
* Small lint
* Add default error handlers to all AI RQ mutations
* Small fix
* Remove IS PLATFORM check for rls assistant
* Add placeholder to RLS code editor
* Fix diff + rls code editor
* Add placeholder message after sending prompt
* Small style
* RLSCodeEditor hit tab if empty to populate placeholder text
* Light mode nudeges
* Update logic for when confirmation close modal should show
* Set render overview ruler as false for rls diff editor
* improve chat UX to make it smoother (thank you alaister for your help 🙏)
* Dynamically do keepPreviousData
* Gracefully handle errors for add prompt
* Use animated ai icon while message is loading
* using Sheet component
* Address commernts
* Bit more improvements
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* set up multiple themes in studio
* set up multiple themes in studio
* set up multiple themes in docs and www
* update all resolvedTheme to also include deep-dark
* update all resolvedTheme checks to also include deep-dark
* update tailwind.config.js tokens
* update tailwind.config.js tokens
* update leftover scale12 token
* update if resolvedTheme _doesn't_ include 'dark'
* update more styling tokens
* add dynamic themes to CmdK
* fix nav and footer for multi theme
* add data-theme selector output to transformTokens.js
* update code-hike.css to target data-theme css
* update tailwindcss to ^3.3.5
* ThemeImage with light and dark src for www and docs
* add brand-button styling token
* update old dark theme boolean
* update old dark theme boolean
* make homepage product visuals themeable
* update product page themed images
* update badge green with brand
* fix roles list appearance
* fix auth widget in auth page
* update more dark logic
* update more dark logic
* add button default bg and border
* update pricing page theme styling
* clean up Themeimage
* remove forceDark in homepage
* update dark:border-dark occurrences
* update dark:border-dark occurrences
* fix dark mode base colors
* remove foreground-strong
* fix notification badge bg
* remove some dark: selectors
* update dark: selectors
* update code-hike deep dark bg color
* fix comment typo
* update border-button-hover token
* fix customer story logo
* remove some more dark: selectors
* restore forceDark in www homepage
* fix auth react icon
* fix homepage product visuals
* remove theme
* add brand-link token
* fix checkbox bg
* npm install
* more visible EntityListItem active bg
* fix --background-alternative-default css vars
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
* Move all studio files from /studio to /apps/studio.
* Move studio specific prettier ignores.
* Fix the ui references from studio.
* Fix the css imports.
* Fix all package.json issues.
* Fix the prettier setup for the studio app.
* Add .turbo folder to prettierignore.
* Fix the github workflows.
Ali Waseem
