From 7c11c3519aee9d0a47db8abc9403b6ccc1350d44 Mon Sep 17 00:00:00 2001 From: rjvelazco Date: Fri, 17 Jul 2026 10:30:47 -0400 Subject: [PATCH 1/5] fix(block-editor): fill 100% height for inline editor in UVE sidebar (#36620) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The new block editor (`dot-block-editor`) rendered inline in the UVE block-editor sidebar drawer did not fill the drawer height — it fell back to its hardcoded 500px scroll surface, leaving empty space above the Cancel/Save footer. The legacy editor filled the drawer via a parent `::ng-deep .editor-wrapper { height: 100% !important }` override, but the new editor no longer renders `.editor-wrapper` (its height moved to an inline `[style]` binding on `.editor-scroll-container`), so that override was dead CSS for it. Add a `fillHeight` input to `DotCMSEditorComponent`: when set, the host, wrapper and panel become a flex column and the scroll surface uses `flex: 1; min-height: 0` instead of the fixed 500px — mirroring the existing fullscreen layout so the toolbar and stats bar keep their natural height. The sidebar passes `[fillHeight]="true"` and its container is now a proper flex column (editor grows, footer keeps its height). The dead `.editor-wrapper` override is scoped to the legacy editor only. Standalone / Edit Contentlet usage is unchanged (fillHeight defaults to false, keeping the fixed resizable height). Co-Authored-By: Claude Opus 4.8 (1M context) --- .../src/lib/editor/editor.component.css | 10 +++ .../src/lib/editor/editor.component.ts | 63 ++++++++++++++----- .../dot-block-editor-sidebar.component.html | 1 + .../dot-block-editor-sidebar.component.scss | 16 +++-- ...dot-block-editor-sidebar.component.spec.ts | 2 + 5 files changed, 73 insertions(+), 19 deletions(-) diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css index 2c36dbf7ea1b..4ef984b93320 100644 --- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.css +++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.css @@ -61,6 +61,16 @@ display: block; } +/* Fill-height mode (see `fillHeight` input): the host becomes a full-height flex column so + the wrapper/panel chain can stretch to fill a bounded parent (e.g. the UVE sidebar drawer). + `min-height: 0` lets the host shrink when it is itself a flex child of the parent. */ +:host(.dot-block-editor--fill-height) { + display: flex; + flex-direction: column; + height: 100%; + min-height: 0; +} + /* ─── ProseMirror base ──────────────────────────────────── */ :host ::ng-deep .ProseMirror { outline: none; diff --git a/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts b/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts index 78941b61da86..557cf94a0541 100644 --- a/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts +++ b/core-web/libs/new-block-editor/src/lib/editor/editor.component.ts @@ -174,6 +174,12 @@ function normalizeEditorContent( selector: 'dot-block-editor', changeDetection: ChangeDetectionStrategy.OnPush, styleUrls: ['./editor.component.css'], + host: { + // Turns the host into a full-height flex column when `fillHeight` is set, so the + // editor stretches to fill a bounded parent (e.g. the UVE sidebar drawer) instead + // of collapsing to its default fixed height. See `:host(.dot-block-editor--fill-height)`. + '[class.dot-block-editor--fill-height]': 'fillHeight()' + }, providers: [ EditorStore, SlashMenuService, @@ -215,11 +221,7 @@ function normalizeEditorContent(
+ [style]="scrollContainerStyle()">