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

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