fix(edit-content): side panel feedback — click-outside, 80% width, sidebar polish (#36631)

[adrianjm-dotCMS]

Parent Issue

#36631 — the panel itself shipped in #36732; this PR addresses the review/QA feedback on top of it.

What changed

1. Click outside closes the panel (through the unsaved-changes guard)

Clicking the area behind the panel now behaves exactly like ESC and the X button: it routes through the editor's unsaved-changes guard, so a dirty form prompts and "Keep editing" cancels the close.

PrimeNG's own dismissible is deliberately left off — it calls close() on mask click, which hides the drawer and emits visibleChange(false) immediately. That both bypasses the guard (unsaved edits lost silently) and desyncs the one-way [visible]="!!data()" binding. The mask click is matched at document level instead, since appendTo="body" moves the mask out of the component's subtree.

Edge cases covered: a click inside the panel is ignored; a drag that starts inside and ends on the mask resolves to a different target and is ignored; with stacked panels (relationship field) only the frontmost reacts, same as ESC.

2. Default width 70% → 80%

3. Nav collapse threshold 1800px → 2560px

At 80% the leftover strip is 20% of the viewport. Against the 270px expanded nav that left ~90px of content at 1800px — a useless sliver, so the nav stayed expanded for no benefit. At 2560 the strip is ~242px.

4. Binary field preview: narrow-layout buttons no longer paint over the sticky tab bar

.dot-file-field-preview__actions--responsive went from z-index: 100 to 2, in line with its siblings (1 for the wide variant, 2 for remove — nothing in the component needs more than 2). 100 was the only value in the whole edit-content lib able to beat the form's sticky .p-tablist (z-index: 10), which carries the status chip and the permissions/references actions. Only reproduced on narrow containers, because that is the only layout where these filled blue/red variants render.

5. Sidebar toggle icon → dock_to_left

Replaces the two mirrored UVE SVGs (left_panel_open.svg / left_panel_close.svg) with a single Material Symbol. Since one glyph now covers both states, the open/closed cue moved to the button's aria-label and the icon is aria-hidden so screen readers don't announce the ligature text.

6. Actions tab section order → Details, Locales, Workflow

The shared .dot-section bottom-border override moved to Workflow (now last) so there is no divider dangling at the end of the tab. Persistence keys are unchanged, so each user's saved expand/collapse state carries over.

Testing

Updated specs alongside each change:

• dot-edit-content-side-panel.component.spec.ts — 4 new tests for click-outside (closes via guard; does not close when the guard cancels; ignored when not frontmost; ignored on a click inside), plus the width assertions.
• dot-side-panel-nav.service.spec.ts — setWideViewport() pinned to the 2560 threshold (the comparison is exclusive, so the boundary must count as wide; bumping the threshold fails here on purpose).
• dot-edit-content-form.component.spec.ts — replaced the two-SVG test with one for the single dock_to_left glyph.
• dot-edit-content-sidebar.component.spec.ts — section-key order updated; noted that queryAll returns DOM order, so that test guards the order too.

Manual verification of the visual changes was done by the author.

🤖 Generated with Claude Code

This PR fixes: #36631

This PR fixes: #36631

[claude]

Claude finished @adrianjm-dotCMS's task in 3m 7s —— View job

---

Code Review — side panel feedback (#36631)

I reviewed the 10 changed files against origin/main, focusing on the new commits that landed after the first round of review comments (cf427149 mask-identity, a91295b3 accessibility). Most of the substantive review feedback has been addressed in-code; details below.

New Issues

• 🟡 Medium: dot-edit-content-side-panel.component.ts:227 (onMaskClick) — the click-outside handler does not apply the #hasOverlayAbove() guard that onEscape() uses; it relies only on the mask-identity check + isTop. For modal overlays (image editor dialog, confirm popup, a second side panel) the identity check is sufficient, since their own mask sits on top and intercepts the click. The gap is non-modal overlays that render without a mask (an open p-select panel, tooltip, menu): the drawer's own mask stays directly clickable behind them, so a click on it fires onMaskClick → requestClose() and pops the unsaved-changes prompt while a lighter overlay is open on top.

  • Assumption: at least one non-modal PrimeNG overlay used inside the editor leaves the drawer mask hit-testable.
  • What to verify: open a p-select/dropdown inside the panel, then click the visible mask strip — does the panel try to close? If so, mirror the onEscape() guard: if (this.#hasOverlayAbove()) return; at the top of onMaskClick.

• 🟡 Medium: dot-file-field-preview.component.scss:130 — z-index: 100 → 2 fixes the tab-bar overlap, and the rationale checks out (siblings are 1/2, sticky .p-tablist is 10). But per @oidacra's history note, 100 was explicitly restored for this --responsive variant in the merge of 34420 unify component #36172 after being lowered to 1, which suggests it was holding these buttons above something else in the narrow layout.

  • What to verify: exercise the narrow/responsive file-field layout for any other element these filled action buttons now sit behind (not just the tab bar case this targets).

• 🟡 Medium: dot-edit-content-side-panel.component.html:29 — !shadow-2xl resolves to a purely vertical shadow (0 25px 50px -12px …, no horizontal offset). On a full-height, right-anchored drawer the previous value was intentionally left-cast (-12px X offset) precisely so the shadow separates the panel from the page behind it; the justifying comment was also removed. As-is the shadow may fall largely outside the viewport.

  • What to verify: whether the loss of the left-directional cast is a deliberate design change (if so, worth a one-line comment) or an unintended visual regression.

Resolved

• ✅ dot-edit-content-form.component.html:149 — accessible-name binding now uses PrimeNG's [ariaLabel] input (not [attr.aria-label] on the host), so the focusable <button> is named; icon is aria-hidden. Matches the Copilot/@oidacra feedback.
• ✅ dot-edit-content-side-panel.component.html:44,60 — the two header buttons likewise switched to [ariaLabel].
• ✅ dot-edit-content-side-panel.component.ts:227 — mask click now matches on identity (event.target !== this.$drawer()?.mask) instead of the shared p-drawer-mask class, so a foreign drawer's mask (e.g. the UVE block-editor sidebar) can no longer close this panel. Covered by the new "click on ANOTHER drawer mask" test.
• ✅ dot-edit-content-side-panel.component.ts:198 — the nested-overlay ESC concern from feat(edit-content): open Edit Content in a slide-in side panel (#36631) #36732 is now handled generically via ZIndexUtils (#hasOverlayAbove()) rather than class-name matching. (Note the mask-click gap above is the one place this guard isn't reused.)
• ✅ dot-edit-content-form.component.spec.ts / ...side-panel.component.spec.ts — specs now assert the accessible name on the descendant <button> and flip between open/close keys, catching the earlier binding bug.
• ✅ dot-edit-content-side-panel.component.spec.ts:329 — the click-inside test now asserts expect(inside).toBeTruthy() before dispatching, so a markup rename can't silently no-op the test.
• ✅ dot-edit-content-sidebar.component.spec.ts:451 / dot-side-panel-nav.service.spec.ts — section order and the 2560 boundary are pinned; the reorder correctly moved border-b-0 onto Workflow (now last) with persistence keys unchanged.

The traceability questions raised in review (add click-outside to AC11, amend AC2 to 80%, confirm the icon swap and section reorder were in-scope) are for #36631 / product, not code correctness — I can't resolve those here.

Nothing blocking from a code-correctness standpoint; the three Mediums are worth a look but don't gate merge.
· branch 36631-feedback

[Copilot]

Pull request overview

Refines the Edit Content side panel based on QA feedback.

Changes:

• Adds guarded click-outside closing and increases panel width to 80%.
• Updates navigation behavior, sidebar ordering/icon, and overlay stacking.
• Expands related unit tests.

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
dot-side-panel-nav.service.ts	Raises nav-collapse threshold.
dot-side-panel-nav.service.spec.ts	Updates threshold coverage.
dot-file-field-preview.component.scss	Fixes action stacking.
dot-edit-content-sidebar.component.html	Reorders sidebar sections.
dot-edit-content-sidebar.component.spec.ts	Verifies section order.
dot-edit-content-side-panel.component.ts	Adds guarded mask-click handling.
dot-edit-content-side-panel.component.html	Updates width and shadow.
dot-edit-content-side-panel.component.spec.ts	Tests outside-click and width behavior.
dot-edit-content-form.component.html	Replaces sidebar SVGs with one glyph.
dot-edit-content-form.component.spec.ts	Verifies the new glyph.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.