fix(edit-content): date pickers use fixed width and stay open until click-outside (#36156)

[adrianjm-dotCMS]

Proposed Changes

Fixes the Date, Date/Time and Time field pickers in the new Edit Contentlet (issue #36156):

• Width — Removed the w-full class, [inputStyleClass]="'w-full'" binding and the width: 100% SCSS override. The picker now uses PrimeNG's default datepicker sizing (display: inline-flex, hugging the input + dropdown button) instead of stretching full width. No hard-coded magic number.
• Close behavior — Set [hideOnDateTimeSelect]="false" so the panel stays open after a date is clicked and only closes on click-outside. This lets users complete the time portion on Date/Time and Time fields. Consistent across all three field types. The selected value is still applied on (onSelect), so it is correctly persisted when the picker closes.
• Added spec coverage for both behaviors across Date, Date/Time and Time.

Screen.Recording.2026-06-30.at.10.43.45.AM.mov

Checklist

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

Additional Info

Single-component change: all three field types are rendered by dot-calendar-field, so the fix applies to Date, Date/Time and Time automatically. No API/backend changes.

Verification:

• pnpm nx test edit-content → 1871 passed (includes 6 new cases)
• pnpm nx lint edit-content → 0 errors

Screenshots

Original	Updated
full-width picker, closes on date click	fixed-width picker, stays open until click-outside

Closes #36156

This PR fixes: #36156

[claude]

Claude finished @adrianjm-dotCMS's task in 1m 8s —— View job

---

Rollback Safety Analysis

• Read rollback-unsafe categories reference
• Get full PR diff
• Analyze diff against all unsafe categories
• Apply appropriate label

---

Result: ✅ Safe To Rollback

All three changed files are purely frontend (Angular component template, SCSS, and spec):

File	Change
calendar-field.component.html	Removed w-full CSS class/binding; added [hideOnDateTimeSelect]="false"
calendar-field.component.scss	Changed display: flex → display: inline-flex; removed width: 100%
dot-edit-content-calendar-field.component.spec.ts	New test cases only

Category check:

Category	Result
C-1 Structural Data Model Change	✅ No DB changes
C-2 ES Mapping Change	✅ No ES changes
C-3 Content JSON Model Version Bump	✅ No model version changes
C-4 DROP TABLE / DROP COLUMN	✅ No DDL
H-1 One-Way Data Migration	✅ No data migrations
H-2 RENAME TABLE / COLUMN	✅ No renames
H-3 PK Restructuring	✅ No PK changes
H-4 New ContentType Field Type	✅ No new field types
H-5 Binary Storage Provider Change	✅ No storage changes
H-6 DROP PROCEDURE / FUNCTION	✅ No stored procedures touched
H-7 NOT NULL Column Without Default	✅ No schema changes
H-8 VTL Viewtool Contract Change	✅ No viewtools touched
M-1 Non-Broadening Column Type Change	✅ No DB changes
M-2 Push Publishing Bundle Format	✅ No bundle changes
M-3 REST / GraphQL API Contract	✅ No API changes
M-4 OSGi Plugin API	✅ No OSGi changes

No backend, database, Elasticsearch, API, or OSGi changes are present. This is a UI-only fix affecting PrimeNG datepicker width and close behavior. Rolling back to the previous release requires no database interaction, no reindex, and no manual ops action.

Label AI: Safe To Rollback has been applied.

[github-actions]

🤖 dotBot Review (Bedrock)

Reviewed 3 file(s); 0 candidate(s) → 0 confirmed, 0 uncertain (unverified, kept for review).

✅ No issues found after verification.

---

_{us.deepseek.r1-v1:0 · Run: #28451631239 · tokens: in: 7275 · out: 1127 · total: 8402 · calls: 3 · est. ~$0.016}

[mergify]

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

• Queue this pull request