mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
4f80bb70cd
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>