fix(block-editor): fill 100% height for inline editor in UVE sidebar (#36620)

[rjvelazco]

Proposed Changes

Fixes the UVE inline block editor not filling 100% of the sidebar drawer height (only ~500px was used, leaving empty space above the Cancel/Save footer).

Root cause

• The new block editor (dot-block-editor, @dotcms/new-block-editor) had no "fill parent" layout mode. Its scroll surface (.editor-scroll-container) was hardcoded to height: 500px via an inline [style] binding, and the panel wasn't a flex column.
• The legacy editor filled the drawer thanks to a parent ::ng-deep .editor-wrapper { height: 100% !important } override. The new editor no longer renders an .editor-wrapper element (the height moved onto .editor-scroll-container), so that override was dead CSS for it — and couldn't beat an inline [style] binding anyway.

Fix

• Added a fillHeight input (booleanAttribute, default false) to DotCMSEditorComponent. When true:
  • the host becomes a full-height flex column (:host(.dot-block-editor--fill-height)),
  • the wrapper/panel become a flex column chain (flex flex-col, flex-1 min-h-0),
  • the scroll surface uses flex: 1; min-height: 0 instead of the fixed 500px — mirroring the existing fullscreen layout, so the toolbar buttons and the stats/word-count bar keep their natural height and the editing surface consumes the rest.
• dot-block-editor-sidebar passes [fillHeight]="true" and its .container is now a proper flex column (editor grows, footer keeps its natural height via flex: 0 0 auto). No more magic calc(100% - 4rem).
• Scoped the now-dead .editor-wrapper ::ng-deep override to the legacy editor only.

Unchanged

• Standalone / Edit Contentlet content-field usage keeps its existing fixed, user-resizable height (fillHeight defaults to false).
• Fullscreen mode is unaffected.

Screenshots / Recording

This PR fixes: #36620

Checklist

• Tests (updated dot-block-editor-sidebar spec to assert fillHeight is passed)
• Lint passes (new-block-editor, portlets-edit-ema-portlet)
• Unit tests pass (new-block-editor, dot-block-editor-sidebar)
• Manual QA in the UVE

🤖 Generated with Claude Code

[claude]

Claude finished @rjvelazco's task in 1m 2s —— View job

---

Review: is this the right CSS pattern?

Yes — this is the correct and idiomatic pattern. A flexbox column chain where the scroll region gets flex: 1; min-height: 0 and the fixed chrome gets shrink-0 is the standard way to make one child consume the remaining height of a bounded parent. The details that make it correct:

• min-height: 0 everywhere down the chain is the load-bearing part. Flex items default to min-height: auto, which refuses to shrink below content size and is exactly what breaks naive "fill the rest + scroll" layouts. You set it on the host, wrapper, panel, and scroll container — so the scroll surface can actually shrink and its own overflow-y: auto takes over. This is the piece people usually forget.
• shrink-0 on the toolbar (editor.component.ts:217) and stats bar (:241) keeps them at natural height so only the scroll surface flexes. Matches the earlier toolbar/stats-bar fix on this branch.
• Reusing the fullscreen layout (scrollContainerStyle() collapses isFullscreen() || fillHeight() to the same flex: 1; min-height: 0) keeps one code path for "fill available height" instead of a third variant.
• booleanAttribute default false correctly preserves the standalone / edit-contentlet fixed-500px-resizable behavior — opt-in, no regression.
• Scoping the dead .editor-wrapper override to dot-old-block-editor only (scss:52) is right: the new editor no longer renders that element, and the diff's own comment documents why. Good cleanup rather than leaving misleading CSS.

The chain is intact end-to-end: host flex-col h-100 min-h-0 → wrapper flex flex-col h-full min-h-0 → panel flex flex-col flex-1 min-h-0 overflow-hidden → [toolbar shrink-0] + [scroll flex-1 min-h-0] + [stats shrink-0]. No gaps.

New Issues

• 🟡 Medium (nit): dot-block-editor-sidebar.component.scss:9 and :44 — height: 100% on .container is now set twice. :host .container (line 9) already applies inside the drawer, so the ::ng-deep .p-drawer-content .container { height: 100% } block (line 43-45) is redundant. Harmless, but you can drop the nested one to reduce the surface. Not blocking.

No bugs, security, or convention issues. Test coverage is appropriate — the spec asserts fillHeight is passed (:156); the rest is pure CSS layout, which isn't meaningfully unit-testable. The one thing worth confirming is the manual QA box you left unchecked (real sidebar at varying viewport heights, plus a very tall document to confirm the scroll surface — not the drawer — is what scrolls).
· issue-36620-uve-inline-block-editor-fill-height

[rjvelazco]

@claude review this code and check if this is the right CSS pattern to solve this issue

[claude]

Review in progress

• Gather context (read diff + changed files)
• Understand request (review CSS pattern for fill-height fix)
• Review editor.component.ts / editor.component.css changes
• Review dot-block-editor-sidebar HTML/SCSS/spec changes
• Assess whether this is the right CSS pattern vs. alternatives
• Post final review feedback

View job run