supabase / supabase / 28231888206

73%

push

github

fix(studio): fix GraphiQL editor layout, gutter bleed and spacing (#47334)

Fixes three GraphiQL/integrations layout issues introduced by the
Marketplace layout change (#45856), which dropped the height passthrough
on the integration page content wrapper.

**Changed:**
- **Full-height integration pages** — the content wrapper had no height,
so GraphiQL's `h-full` editor collapsed instead of filling the page.
Added `flex-1 min-h-0` to the wrapper in both the legacy
(`LegacyIntegrationPage`) and marketplace (`MarketplaceDetail`) render
paths.
- **GraphiQL gutter bleed** — Monaco's `.overflow-guard` was ending up
`overflow: visible` (an inline style Monaco sets at runtime), so the
oversized opaque line-number gutter escaped the editor and painted over
the page above it. Re-asserted the clip, scoped to GraphiQL so the SQL
editor is untouched.
- **GraphiQL editor spacing** — removed GraphiQL's default 16px
query-editor padding so the scroll shadow sits flush, and restored the
content's breathing room via Monaco's own `padding` (top/bottom) and
`glyphMargin` (line-number left inset) options, which leave the scroll
shadow pinned to the top edge.

Before:
<img width="2056" height="814" alt="Screenshot 2026-06-26 at 5 27 24 PM"
src="https://github.com/user-attachments/assets/573856bf-2bfb-4bf2-9dd7-59c29b423ec9"
/>

## To test

- Open a project → **Integrations → GraphiQL** (the `graphiql` tab). The
editor should fill the full page height.
- Scroll the query editor — the scroll shadow should sit flush at the
top edge, not float inset, and the white gutter should not bleed over
the page header above.
- Confirm line numbers have left padding and content has top/bottom
padding.
- Trigger autocomplete in the editor — the suggestion popup should still
appear (not clipped by the gutter `overflow: hidden`).
- Toggle the **Marketplace** feature preview (Account dropdown → Feature
Previews) and re-check the GraphiQL page in both states, since it
renders through two dif... (continued)

1046 of 1450 branches covered (72.14%)

Branch coverage included in aggregate %.

1584 of 2152 relevant lines covered (73.61%)

245.93 hits per line