diff --git a/frontend/src/SiteEditor.vue b/frontend/src/SiteEditor.vue index 7297fd8..7dd08df 100644 --- a/frontend/src/SiteEditor.vue +++ b/frontend/src/SiteEditor.vue @@ -561,7 +561,7 @@ onUnmounted(() => { -
+
brand code (replaces the brand link)
-
+
custom CSS (applies to every page, on top of the theme)
@@ -595,6 +595,7 @@ onUnmounted(() => { display: flex; flex-direction: column; overflow-y: auto; + background: var(--surface); } .block { @@ -606,6 +607,13 @@ onUnmounted(() => { background: var(--surface); } +/* Editor blocks (brand HTML, custom CSS) share the leftover panel height + equally; their CodeMirror windows fill the block and scroll internally. */ +.block.grow { + flex: 1; + min-height: 7rem; +} + .block-head { display: flex; align-items: center; @@ -775,42 +783,29 @@ onUnmounted(() => { border-color: var(--accent); } -/* Small CodeMirror window for the custom brand HTML; scrolls internally. */ -.brand-cm { - border: 1px solid var(--line); - border-radius: 4px; - overflow: hidden; -} - -.brand-cm :deep(.cm-editor) { - max-height: 7rem; - font-size: 0.85rem; -} - -.brand-cm :deep(.cm-scroller) { - overflow: auto; -} - -.brand-cm :deep(.cm-gutters) { - display: none; -} - -/* CodeMirror window for site-wide custom CSS. */ +/* CodeMirror windows for the brand HTML and custom CSS: fill the growing + block, scroll internally. */ +.brand-cm, .css-cm { + flex: 1; + min-height: 0; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; } +.brand-cm :deep(.cm-editor), .css-cm :deep(.cm-editor) { - max-height: 12rem; + height: 100%; font-size: 0.85rem; } +.brand-cm :deep(.cm-scroller), .css-cm :deep(.cm-scroller) { overflow: auto; } +.brand-cm :deep(.cm-gutters), .css-cm :deep(.cm-gutters) { display: none; }