mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 03:45:06 +03:00
Alaister Young
1f0abede5d
Studio (@monaco-editor/react via the AMD loader) and GraphiQL (@graphiql/react,
bundled ESM) ran as two separate Monaco instances on one page. Each injects
Monaco's global CSS (.monaco-editor layout rules and .mtk* theme classes), which
collide: after visiting GraphiQL the SQL editor's wrapper was reflowed to a ~5px
slit and its syntax colors swapped to GraphiQL's theme.
- Import monaco-editor once and hand it to loader.config({ monaco }) so the bundler
dedupes GraphiQL's copy with ours -> one instance, one CSS, one theme.
- Set up Monaco workers for the bundled instance (lib/monaco-setup).
- GraphiQL imports graphiql.css (UI only) instead of style.css (which bundles a
second Monaco CSS copy), and uses the primary 'supabase' theme.
- Neutralize Monaco's runtime-injected '.monaco-editor{position:absolute!important}'
rule which otherwise collapses the @monaco-editor/react wrapper.
88 lines
2.2 KiB
CSS
88 lines
2.2 KiB
CSS
@reference "./globals.css";
|
|
|
|
.monaco-editor {
|
|
@apply relative overflow-visible;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
/* Monaco dynamically inserts a global `.monaco-editor { position: absolute !important }` rule at
|
|
* runtime when an editor initializes (observed via GraphiQL). On the @monaco-editor/react wrapper
|
|
* that's fatal: it pulls the wrapper out of flow so its only (absolutely-positioned) child gives
|
|
* it zero content height, collapsing the editor to ~5px. Re-assert Monaco's real default with a
|
|
* higher-specificity selector (`.monaco-editor.monaco-editor` = 0,2,0) so it beats the injected
|
|
* `!important` rule. Confirmed not to affect GraphiQL's own editor layout. */
|
|
.monaco-editor.monaco-editor {
|
|
position: relative !important;
|
|
}
|
|
|
|
.monaco-editor-alt.monaco-editor-alt,
|
|
.monaco-editor-alt > .monaco-editor {
|
|
--vscode-editor-background: hsl(var(--background-surface-300)) !important;
|
|
--vscode-editorGutter-background: hsl(var(--background-surface-300)) !important;
|
|
}
|
|
|
|
.monaco-editor-alt .current-line {
|
|
border: 0 !important;
|
|
}
|
|
|
|
[data-theme='dark'] .monaco-editor,
|
|
[data-theme='dark'] .monaco-diff-editor {
|
|
--vscode-editor-background: hsl(var(--background-surface-100)) !important;
|
|
--vscode-editorGutter-background: hsl(var(--background-surface-100)) !important;
|
|
color-scheme: dark;
|
|
}
|
|
.monaco-editor,
|
|
.monaco-diff-editor {
|
|
--vscode-editor-background: hsl(var(--background-dash-sidebar)) !important;
|
|
--vscode-editorGutter-background: hsl(var(--background-dash-sidebar)) !important;
|
|
outline: none !important;
|
|
}
|
|
|
|
.gutter {
|
|
@apply bg-border-control;
|
|
cursor: row-resize;
|
|
}
|
|
|
|
.grid-monaco-editor,
|
|
.monaco-editor p,
|
|
label,
|
|
div,
|
|
section,
|
|
span.th.tr.td.textarea {
|
|
/* @apply text-sm; */
|
|
}
|
|
|
|
.grid-monaco-editor,
|
|
.monaco-editor label {
|
|
font-weight: inherit;
|
|
text-transform: none;
|
|
padding: inherit;
|
|
width: inherit;
|
|
align-self: inherit;
|
|
}
|
|
|
|
.grid-monaco-editor,
|
|
.monaco-editor label:hover {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.find-widget {
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.grid-monaco-editor,
|
|
.monaco-editor .suggest-widget {
|
|
.main {
|
|
max-height: none;
|
|
height: inherit;
|
|
width: 100%;
|
|
margin: inherit;
|
|
padding: inherit;
|
|
overflow: inherit;
|
|
}
|
|
|
|
.monaco-list-row.focused .main {
|
|
background: var(--vscode-quickInput-background);
|
|
}
|
|
}
|