[6.x] Fix date picker inconsistencies (#14732)

Co-authored-by: Jason Varga <jason@pixelfear.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 3 people

resources/js/components/ui/DatePicker/DatePicker.vue

@@ -163,7 +163,7 @@ const getInputLabel = (part) => {
                         :class="[
                             'flex w-full items-center overflow-x-auto overflow-y-hidden bg-white uppercase dark:bg-gray-900',
                             'border border-gray-300 dark:border-gray-700',
-                            'text-gray-600 dark:text-gray-300',
+                            'leading-[1.375rem] text-gray-600 dark:text-gray-300',
                             'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
                             'data-invalid:border-red-500',
                             'disabled:shadow-none disabled:opacity-50',
@@ -185,7 +185,8 @@ const getInputLabel = (part) => {
                                 <div v-if="item.part === 'literal'">
                                     <DatePickerInput
                                         :part="item.part"
-                                        :class="{ 'text-sm text-gray-600 dark:text-gray-400 antialiased': !item.contenteditable }"
+                                        class="whitespace-pre"
+                                        :class="{ 'text-gray-600 dark:text-gray-400': !item.contenteditable }"
                                         v-on="inputEvents"
                                     >
                                         {{ item.value }}
@@ -194,9 +195,9 @@ const getInputLabel = (part) => {
                                 <div v-else>
                                     <DatePickerInput
                                         :part="item.part"
-                                        class="rounded-sm px-0.25 py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
+                                        class="rounded-sm py-0.5 focus:bg-blue-100 focus:outline-hidden data-placeholder:text-gray-600 dark:focus:bg-blue-900 dark:data-placeholder:text-gray-400"
                                         :class="{
-                                            'px-0.5!': item.part === 'month' || item.part === 'year' || item.part === 'day',
+                                            'px-0.25!': item.part === 'month' || item.part === 'year' || item.part === 'day',
                                         }"
                                         :aria-label="getInputLabel(item.part)"
                                         v-on="inputEvents"

resources/js/components/ui/DateRangePicker/DateRangePicker.vue

@@ -15,6 +15,7 @@ import {
     DateRangePickerHeading,
     DateRangePickerNext,
     DateRangePickerPrev,
+    DateRangePickerAnchor,
     DateRangePickerContent,
     DateRangePickerField,
     DateRangePickerInput,
@@ -136,22 +137,27 @@ const hoverCardDate = computed(() => {
             close-on-select
         >
             <DateRangePickerField v-slot="{ segments }" class="w-full">
+                <DateRangePickerAnchor as-child>
                 <div
                     :class="[
                         'flex items-center w-full overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-900',
                         'border border-gray-300 dark:border-gray-700',
                         'leading-[1.375rem] text-gray-600 dark:text-gray-300 @max-xs:text-xs',
-                        'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
+                        'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
                         'data-invalid:border-red-500',
                         'disabled:shadow-none disabled:opacity-50',
                         readOnly ? 'border-dashed' : '',
                     ]"
                 >
-                    <DateRangePickerTrigger v-if="!inline">
-                        <Button as="div" variant="ghost" size="sm" icon="calendar" class="-ms-2" />
+                    <DateRangePickerTrigger
+                        v-if="!inline"
+                        class="flex shrink-0 items-center justify-center rounded-lg p-2 -ms-1 text-gray-500 dark:text-gray-400 outline-hidden hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+                        :aria-label="__('Open calendar')"
+                    >
+                        <Icon name="calendar" class="size-4" />
                     </DateRangePickerTrigger>
                     <template v-for="item in segments.start" :key="item.part">
-                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start">
+                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="start" class="whitespace-pre">
                             {{ item.value }}
                         </DateRangePickerInput>
                         <DateRangePickerInput
@@ -168,7 +174,7 @@ const hoverCardDate = computed(() => {
                     </template>
                     <span class="mx-0.75 text-gray-400 dark:text-gray-600">&ndash;</span>
                     <template v-for="item in segments.end" :key="item.part">
-                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="end">
+                        <DateRangePickerInput v-if="item.part === 'literal'" :part="item.part" type="end" class="whitespace-pre">
                             {{ item.value }}
                         </DateRangePickerInput>
                         <DateRangePickerInput
@@ -194,13 +200,13 @@ const hoverCardDate = computed(() => {
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>
+                </DateRangePickerAnchor>
             </DateRangePickerField>
 
             <DateRangePickerContent
                 v-if="!inline"
                 align="start"
-                :align-offset="-12"
-                :side-offset="14"
+                :side-offset="4"
                 class="data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade will-change-[transform,opacity]"
             >
                 <Card class="w-[20rem]">