feat(edit-content): fill the column, clear on the field, and rebuild the picker footer (#37465)

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

@@ -20,8 +20,54 @@
     [showIcon]="true"
     [icon]="fieldTypeConfig.icon"
     [showButtonBar]="true"
-    [showClear]="$isExpireDateField()"
+    [showClear]="true"
     [placeholder]="
         $isExpireDateField() ? ('edit.content.form.field.calendar.never.expires' | dm) : ''
     "
-    [attr.aria-label]="field.name" />
+    [attr.aria-label]="field.name">
+    <!--
+        Replaces PrimeNG's stock footer (Today on the left, Clear on the right). Clear leaves
+        entirely — emptying the field is the on-field X above. The layout is our own flex row
+        rather than the theme's default justification, so the Date-only case, which renders no
+        timezone at all, still puts the action flush right with no empty slot holding its place.
+    -->
+    <ng-template #buttonbar>
+        <!--
+            Tailwind utilities, not component SCSS: the overlay is appended to body, so a
+            ':host ::ng-deep' rule never matches it — the selector requires the element to be a
+            descendant of the host. Tailwind's classes are global, so they apply wherever
+            PrimeNG moves these nodes.
+        -->
+        <div class="flex w-full items-center justify-between gap-2">
+            @if ($showFooterTimezone()) {
+                <span class="text-sm text-muted-color" data-testid="calendar-field-timezone">
+                    {{ $systemTimezone().label }}
+                </span>
+            }
+            <p-button
+                class="ml-auto"
+                size="small"
+                severity="secondary"
+                [outlined]="true"
+                data-testid="calendar-field-today-button"
+                [label]="$footerActionLabel() | dm"
+                (onClick)="setCurrentServerDateTime()" />
+        </div>
+    </ng-template>
+
+    <!--
+        PrimeNG's default clear control is a bare <svg> with a click handler: not focusable,
+        no accessible name, unreachable by keyboard. Projecting a real button restores all
+        three. The click bubbles to the wrapping span PrimeNG puts the handler on, so Enter
+        and Space work through the native button behaviour without extra key handling.
+    -->
+    <ng-template #clearicon>
+        <button
+            type="button"
+            class="calendar-field__clear"
+            data-testid="calendar-clear-button"
+            [attr.aria-label]="'edit.content.form.field.calendar.clear' | dm">
+            <i class="pi pi-times" aria-hidden="true"></i>
+        </button>
+    </ng-template>
+</p-datepicker>

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

@@ -2,14 +2,21 @@
 // the ring encloses both the input and the calendar icon button as one unit.
 
 :host ::ng-deep p-datepicker {
-    // Use PrimeNG's default datepicker sizing
-    display: inline-flex;
+    // Block-level flex so the control fills the column it sits in, matching every other field
+    // type. The input is the part that grows; the trigger keeps its intrinsic width and stays
+    // flush against the right edge.
+    display: flex;
+    width: 100%;
     border-radius: var(--p-inputtext-border-radius);
+
     transition:
         border-color var(--p-inputtext-transition-duration),
         box-shadow var(--p-inputtext-transition-duration);
 
     .p-datepicker-input {
+        // Grows so the input, not the wrapper, absorbs the column's extra width.
+        flex: 1 1 auto;
+        min-width: 0;
         border-right: 0;
     }
 
@@ -51,3 +58,23 @@
         border-color: var(--p-inputtext-invalid-border-color);
     }
 }
+
+// The clear control projected through PrimeNG's #clearicon template. PrimeNG positions the
+// slot; this only strips the button chrome so it reads as the icon it replaces, while staying
+// a real focusable button (see calendar-field.component.html).
+:host ::ng-deep .calendar-field__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+
+    &:focus-visible {
+        outline: var(--p-focus-ring-width) solid var(--p-focus-ring-color);
+        outline-offset: var(--p-focus-ring-offset);
+        border-radius: var(--p-border-radius-sm);
+    }
+}