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

[claude]

Claude finished @adrianjm-dotCMS's task in 5m 39s —— View job

---

Claude Code Review

I reviewed the full diff against origin/main — the click-outside handler, width/threshold constants, sidebar/section reordering, the icon swap, and the z-index fix — along with the updated specs.

New Issues

No issues found.

Notes (non-blocking, no action required)

• Click-outside routing is correct. onMaskClick (dot-edit-content-side-panel.component.ts:200) filters on DrawerClasses.mask before the isTop guard, so a click inside the panel or a drag that ends on the mask (whose click target resolves to the common ancestor, not the mask) is ignored, and only the frontmost stacked panel reacts — matching the existing ESC semantics at :180. Reading the class from DrawerClasses rather than hardcoding 'p-drawer-mask' is the right call: a PrimeNG rename updates the enum, a removal breaks the build.
• No self-close race. The document-level (document:click) listener is registered when the component is created (i.e. after data() is set), and the mask is built asynchronously during the drawer's show animation — so the click that opened the panel has already completed and cannot immediately re-close it.
• z-index 100 → 2 (dot-file-field-preview.component.scss:130) is consistent with its siblings (1/2) and correctly drops below the form's sticky .p-tablist (z-index: 10). Verified 2 still clears the thumbnail/code preview, which is the only thing it needs to sit above.
• Section reorder (dot-edit-content-sidebar.component.html) preserves the actions.details / actions.locales / actions.workflow persistence keys, and the [&_.dot-section]:border-b-0 override correctly moved to Workflow (now last). The spec at :443 pins both the keys and DOM order.
• Icon a11y (dot-edit-content-form.component.html:143): moving the open/closed cue to the button aria-label with aria-hidden on the decorative glyph is correct, since one ligature now covers both states. The material-symbols-outlined font is already used elsewhere in this lib, so it's available.
• Threshold 1800 → 2560 (dot-side-panel-nav.service.ts:42): the comparison is exclusive (<), and setWideViewport() is pinned to 2560 in the spec, so the boundary is exercised as "wide" — good guard against silent regressions.

Solid work — the specs match each behavioral change and the tricky edge cases (guard cancel, not-frontmost, click-inside, drag-out) are all covered.

· 36631-feedback