Skip to content

fix(edit-content): date picker panel clipped by dialog overflow (#36156 QA) - #36566

Merged
adrianjm-dotCMS merged 1 commit into
mainfrom
36156-qa-feedback
Jul 14, 2026
Merged

fix(edit-content): date picker panel clipped by dialog overflow (#36156 QA)#36566
adrianjm-dotCMS merged 1 commit into
mainfrom
36156-qa-feedback

Conversation

@adrianjm-dotCMS

@adrianjm-dotCMS adrianjm-dotCMS commented Jul 14, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

Proposed Changes

QA feedback on #36156: the Date / Date-Time / Time picker panel was partially obscured when opened inside the Edit Content dialog or in full screen — the overlay was being clipped by the dialog's overflow boundary.

Screen.Recording.2026-07-14.at.10.49.48.AM.mov

Fix: add [appendTo]="'body'" to the <p-datepicker> in calendar-field.component. PrimeNG renders the panel inline by default, so any ancestor with overflow: hidden/auto (the dialog / full-screen container) clips it. Teleporting the overlay to <body> takes it out of the clipping context. This is the same pattern already used by the other overlays in libs/edit-content (menus, dialogs, file-field).

Single-line change; applies to all three field types (Date, Date/Time, Time) since they share dot-calendar-field. No API/backend changes.

Checklist

  • Tests
  • Translations
  • Security Implications Contemplated (none — frontend presentation/UX only)

Relates to #36156

🤖 Generated with Claude Code

This PR fixes: #36156

@github-actions github-actions Bot mentioned this pull request Jul 14, 2026
Closed
9 tasks
@github-actions github-actions Bot added the Area : Frontend PR changes Angular/TypeScript frontend code label Jul 14, 2026
@claude

claude Bot commented Jul 14, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Claude finished @adrianjm-dotCMS's task in 59s —— View job

Claude finished @adrianjm-dotCMS's task in 46s —— View job

PR Review — date picker appendTo="body"

  • Gather context (diff, template, existing appendTo usage)
  • Review the change

New Issues

No issues found.

The one-line addition of [appendTo]="'body'" to <p-datepicker> (calendar-field.component.html:13) is correct:

  • Fixes the reported clipping. PrimeNG renders the datepicker overlay inline by default, so any ancestor with overflow: hidden/auto (the Edit Content dialog / full-screen container) clips it. Teleporting the panel to <body> removes it from that clipping context — the standard PrimeNG remedy.
  • Consistent with the codebase. This matches the established convention across libs/edit-content — e.g. dot-file-field-preview.component.html:166 ([appendTo]="'body'" on a datepicker), plus menus and dialogs in the relationship field, command-bar actions, and sidebar components.
  • Covers all three field types. Date, Date/Time, and Time all share dot-calendar-field, so the single change applies uniformly.
  • No functional/API/security surface. Purely presentational overlay positioning; no backend or data changes.

Minor, non-blocking notes:

  • No test change. Reasonable here — this is a presentation attribute with no behavioral logic; overlay positioning isn't meaningfully unit-testable via Jest/Spectator. An E2E/visual check inside the dialog would be the only way to guard against regression, but that's optional for a change of this size.
  • appendTo teleports the panel outside the component's DOM subtree. Worth a quick manual verification that the overlay still inherits the intended theme/styles when rendered under <body> (it should, since PrimeNG's theme is global and the same pattern is already used elsewhere).

LGTM. ✅

``

@adrianjm-dotCMS
adrianjm-dotCMS marked this pull request as ready for review July 14, 2026 14:49
@mergify

mergify Bot commented Jul 14, 2026 •
edited
Loading

Copy link
Copy Markdown

Queued — the merge queue status continues in this comment ↓.

@adrianjm-dotCMS
adrianjm-dotCMS added this pull request to the merge queue Jul 14, 2026
@mergify

mergify Bot commented Jul 14, 2026 •
edited
Loading

Copy link
Copy Markdown

Merge Queue Status

This pull request spent 57 minutes 33 seconds in the queue, with no time running CI.

Waiting for any of
  • check-neutral = Finalize / Final Status
  • check-skipped = Finalize / Final Status
  • check-success = Finalize / Final Status
All conditions

Reason

Pull request #36566 has been merged manually at cd5497f

Hint

You were too fast!

Tick the box to put this pull request back in the merge queue (same as @mergifyio queue).

  • Requeue this pull request

@mergify mergify Bot added the queued label Jul 14, 2026
mergify Bot added a commit that referenced this pull request Jul 14, 2026
@mergify
Merge of #36566
fc8c861
@mergify mergify Bot mentioned this pull request Jul 14, 2026
Closed
22 tasks
mergify Bot added a commit that referenced this pull request Jul 14, 2026
@mergify
Merge of #36566
77ab719
@mergify mergify Bot mentioned this pull request Jul 14, 2026
Closed
22 tasks
Merged via the queue into main with commit cd5497f Jul 14, 2026
44 checks passed
@adrianjm-dotCMS
adrianjm-dotCMS deleted the 36156-qa-feedback branch July 14, 2026 15:54
@mergify mergify Bot added dequeued and removed queued labels Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@oidacra oidacra oidacra approved these changes
@nicobytes nicobytes nicobytes approved these changes

Assignees

No one assigned

Labels

AI: Safe To Rollback Area : Frontend PR changes Angular/TypeScript frontend code dequeued

Projects

dotCMS - Product Planning
Status: No status

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Date/Time/Time field pickers: fixed width and keep-open-until-click-outside

3 participants

@adrianjm-dotCMS @oidacra @nicobytes