mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
4fa106e53c
GraphiQL (`@graphiql/react`) runs a second Monaco instance that injects
two global, page-wide styles which corrupt Studio's other editors once a
GraphiQL chunk has loaded (it persists across client-side navigation, so
a full reload hides it). After visiting GraphiQL and returning to e.g.
the SQL editor, the editor collapses to a ~5px sliver and its syntax
colors swap to GraphiQL's theme.
**Changed:**
- `monaco.css` — a higher-specificity counter-rule
(`.monaco-editor.monaco-editor { position: relative !important }`) beats
GraphiQL's runtime-injected `.monaco-editor { position: absolute
!important }`, which otherwise pulls Studio's `@monaco-editor/react`
wrapper out of flow and collapses it to ~5px.
- GraphiQL now uses the primary `supabase` Monaco theme instead of a
separate `supabase-graphql-*` theme, so the global `.mtk*` token palette
stays identical and syntax colors no longer bleed into other editors.
**Added:**
- E2E test (`monaco-graphiql-coexistence.spec.ts`) reproducing both bugs
via client-side SQL editor → GraphiQL → SQL editor navigation (a full
reload unloads the chunk and hides the bug).
- Component test (`CodeEditor.test.tsx`) guarding the height-class
precedence regression from #47339/#47350 — a caller height (e.g. the
email template editor's `h-96`) must win over the default `h-full`.
Covered as a component test since the email source editor isn't
reachable on self-hosted.
## To test
- Open the SQL editor → **Integrations → GraphiQL** → back to the SQL
editor (in-app navigation, not a reload). It should stay full height and
keep its own syntax colors.
- Confirm autocomplete still works in the SQL editor.
- `pnpm --prefix e2e/studio run e2e --
features/monaco-graphiql-coexistence.spec.ts`
- `pnpm --prefix apps/studio test -- CodeEditor.test`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved Monaco editor styling so GraphiQL no longer affects the SQL
editor’s theme or layout when navigating between them.
* Fixed editor sizing so a custom height now takes precedence over the
default full-height setting.
* Polished GraphiQL panel styling for more consistent spacing and
appearance across themes.
* **New Features**
* GraphiQL now uses the shared editor theme for better visual
consistency with Studio.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <[email protected]>
Co-authored-by: Joshen Lim <[email protected]>
20 lines
1.1 KiB
CSS
20 lines
1.1 KiB
CSS
/*
|
|
* GraphiQL v5 bundles a full copy of Monaco's CSS into its stylesheet. Studio's
|
|
* SQL editor (and every other Monaco instance) shares the same global Monaco
|
|
* instance, and those `.monaco-*` rules are unscoped, so importing GraphiQL's
|
|
* stylesheet directly leaks its Monaco theme onto the SQL editor — whichever
|
|
* stylesheet happens to load last wins the cascade.
|
|
*
|
|
* Importing it into a low-priority cascade layer fixes this without touching the
|
|
* vendored bundle: Studio's own Monaco styles (the runtime-injected monaco-editor
|
|
* CSS and styles/monaco.css) are unlayered, and unlayered rules always beat any
|
|
* layered rule. So Studio's Monaco styling wins everywhere — including inside
|
|
* GraphiQL's editor, which is the consistent behavior we want.
|
|
*
|
|
* GraphiQL's own UI (the `.graphiql-container` selectors) still applies: the
|
|
* `graphiql` layer is registered after Tailwind's layers (this file loads after
|
|
* globals.css), so it outranks Tailwind's base/component resets just as the
|
|
* unlayered import did before.
|
|
*/
|
|
@import 'graphiql/style.css' layer(graphiql);
|