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

### 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.




https://github.com/user-attachments/assets/1ac2a867-7686-4004-964d-2874797f3f97



### Checklist
- [x] Tests
- [ ] Translations
- [x] 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

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: adrianjm-dotCMS

core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.html

@@ -3,14 +3,13 @@
 @let fieldTypeConfig = $fieldTypeConfig();
 
 <p-datepicker
-    class="w-full"
-    [inputStyleClass]="'w-full'"
     [class.ng-invalid]="hasError"
     [class.ng-dirty]="hasError"
     [formControl]="internalFormControl"
     [defaultDate]="$defaultDate()"
     [timeOnly]="fieldTypeConfig.timeOnly"
     [showTime]="fieldTypeConfig.showTime"
+    [hideOnDateTimeSelect]="false"
     (onSelect)="onCalendarChange($event)"
     (onClearClick)="onCalendarChange(null)"
     (onClear)="onCalendarChange(null)"

core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/components/calendar-field/calendar-field.component.scss

@@ -2,8 +2,8 @@
 // the ring encloses both the input and the calendar icon button as one unit.
 
 :host ::ng-deep p-datepicker {
-    display: flex;
-    width: 100%;
+    // Use PrimeNG's default datepicker sizing
+    display: inline-flex;
     border-radius: var(--p-inputtext-border-radius);
     transition:
         border-color var(--p-inputtext-transition-duration),

core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.spec.ts

@@ -442,6 +442,61 @@ describe('DotEditContentCalendarFieldComponent', () => {
         });
     });
 
+    describe('Picker presentation (issue #36156)', () => {
+        const buildHost = (fieldType: FIELD_TYPES) => {
+            const field = { ...DATE_FIELD_MOCK, fieldType };
+            spectator = createHost(
+                `<form [formGroup]="formGroup">
+                    <dot-edit-content-calendar-field [field]="field" [contentlet]="contentlet" [utcTimezone]="utcTimezone" [contentType]="contentType" />
+                </form>`,
+                {
+                    hostProps: {
+                        formGroup: new FormGroup({
+                            [field.variable]: new FormControl()
+                        }),
+                        field,
+                        utcTimezone: null,
+                        contentType: CONTENT_TYPE_WITHOUT_EXPIRE,
+                        contentlet: createFakeContentlet({
+                            [field.variable]: null
+                        })
+                    }
+                }
+            );
+            spectator.detectChanges();
+        };
+
+        const FIELD_TYPES_UNDER_TEST = [
+            ['Date', FIELD_TYPES.DATE],
+            ['Date/Time', FIELD_TYPES.DATE_AND_TIME],
+            ['Time', FIELD_TYPES.TIME]
+        ] as const;
+
+        it.each(FIELD_TYPES_UNDER_TEST)(
+            'should keep the %s picker open on selection (closes only on click-outside)',
+            (_label, fieldType) => {
+                buildHost(fieldType);
+
+                const calendar = spectator.query(DatePicker);
+                expect(calendar.hideOnDateTimeSelect).toBe(false);
+            }
+        );
+
+        it.each(FIELD_TYPES_UNDER_TEST)(
+            'should render the %s picker at PrimeNG default width, not full width',
+            (_label, fieldType) => {
+                buildHost(fieldType);
+
+                // No full-width override is applied; PrimeNG default sizing is used.
+                const calendar = spectator.query(DatePicker);
+                expect(calendar.inputStyleClass).toBeFalsy();
+
+                const datepickerEl = spectator.query('p-datepicker');
+                expect(datepickerEl?.classList.contains('w-full')).toBe(false);
+            }
+        );
+    });
+
     describe('Default value handling', () => {
         beforeEach(() => {
             // Mock utility functions