From 34e8f38a163b20356debefd492b7c9f53ed4fd92 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 11:34:51 +0100
Subject: [PATCH 1/3] Date picker - Correct color value specificity for the
 because it wasn't high enough

---
 resources/js/components/ui/DatePicker/DatePicker.vue           | 2 +-
 resources/js/components/ui/DateRangePicker/DateRangePicker.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index d61ceb362a8..fb87ebae987 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -210,7 +210,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600 dark:text-gray-400 me-1" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! me-1" size="xs" :text="timeZoneLabel" />
                         </TimezoneHoverCard>
                         <Button
                             v-if="clearable && !readOnly"
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 058aaeacfad..5d6f917a92f 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -189,7 +189,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600 dark:text-gray-400 me-1" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! me-1" size="xs" :text="timeZoneLabel" />
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>

From dab14281ffa956ba64bf89a171a3ce2d1cd75968 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 11:49:10 +0100
Subject: [PATCH 2/3] Date picker / timezone badge - Add some space in case the
 date gets too close to the timezone badge

---
 resources/js/components/ui/DatePicker/DatePicker.vue           | 2 +-
 resources/js/components/ui/DateRangePicker/DateRangePicker.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index fb87ebae987..176589086c4 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -210,7 +210,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600! dark:text-gray-400! me-1" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! ms-3 me-1" size="xs" :text="timeZoneLabel" />
                         </TimezoneHoverCard>
                         <Button
                             v-if="clearable && !readOnly"
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 5d6f917a92f..8b00c027b13 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -189,7 +189,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600! dark:text-gray-400! me-1" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! ms-3 me-1" size="xs" :text="timeZoneLabel" />
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>

From adb5e8833b7a169befdba31a48332e0f8e777e72 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 12 May 2026 12:08:45 +0100
Subject: [PATCH 3/3] Date picker / timezone badge - Hide overflow

---
 resources/js/components/ui/DatePicker/DatePicker.vue          | 4 ++--
 .../js/components/ui/DateRangePicker/DateRangePicker.vue      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index 176589086c4..062b2f9054f 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -159,7 +159,7 @@ const getInputLabel = (part) => {
                 <DatePickerAnchor as-child>
                     <div
                         :class="[
-                            'flex w-full items-center bg-white uppercase dark:bg-gray-900',
+                            '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',
                             'shadow-ui-sm not-prose h-10 rounded-lg px-2 disabled:shadow-none',
@@ -210,7 +210,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600! dark:text-gray-400! ms-3 me-1" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
                         </TimezoneHoverCard>
                         <Button
                             v-if="clearable && !readOnly"
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 8b00c027b13..2389914c41e 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -137,7 +137,7 @@ const hoverCardDate = computed(() => {
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
                     :class="[
-                        'flex items-center w-full bg-white dark:bg-gray-900',
+                        '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',
                         'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
@@ -189,7 +189,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600! dark:text-gray-400! ms-3 me-1" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
                     </TimezoneHoverCard>
                     <Button v-if="!readOnly" @click="emit('update:modelValue', null)" variant="subtle" size="sm" icon="x" class="-me-2" :disabled="disabled" />
                 </div>