From cd0488fe95713469949abf2030e4612db458b2d6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 26 May 2026 15:54:12 +0100
Subject: [PATCH 1/5] Tighten up datepicker spacing with a container query

---
 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 062b2f9054f..a481baa8e49 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -178,7 +178,7 @@ const getInputLabel = (part) => {
                         >
                             <Icon name="calendar" class="size-4" />
                         </DatePickerTrigger>
-                        <div class="flex items-center flex-1">
+                        <div class="flex flex-1 items-center @max-xs:text-sm">
                             <template v-for="item in segments" :key="item.part">
                                 <div v-if="item.part === 'literal'">
                                     <DatePickerInput
@@ -210,7 +210,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! ms-2.5" 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 051b6367c28..2cfd13b5755 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -140,7 +140,7 @@ const hoverCardDate = computed(() => {
                     :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',
+                        'leading-[1.375rem] text-gray-600 dark:text-gray-300 @max-xs:text-sm',
                         'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',
                         'data-invalid:border-red-500',
                         'disabled:shadow-none disabled:opacity-50',
@@ -190,7 +190,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600! dark:text-gray-400! ms-2.5 me-1" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! ms-2.5" 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 a278bcd85abe38a811481a18365292b65a2013ae Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 26 May 2026 16:06:40 +0100
Subject: [PATCH 2/5] Make custom scrollbar size more usable

---
 resources/css/core/utilities.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index 436ecdcb27b..ec872bc5f87 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -31,7 +31,7 @@
 }
 
 @utility st-custom-scrollbar {
-    --sb-size: 3px;
+    --sb-size: 5px;
     --sb-thumb-color: var(--color-gray-400);
     &:where(.dark, .dark *) {
         --sb-thumb-color: var(--color-gray-500);

From 84d17d963b8cbeafbaad798015894dcf80fabbd8 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 26 May 2026 16:10:25 +0100
Subject: [PATCH 3/5] Add a height property to the custom scrollbar and add it
 to the date/daterange picker so overflow is easier to read

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

diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index ec872bc5f87..bfbc7530616 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -31,7 +31,7 @@
 }
 
 @utility st-custom-scrollbar {
-    --sb-size: 5px;
+    --sb-size: 4px;
     --sb-thumb-color: var(--color-gray-400);
     &:where(.dark, .dark *) {
         --sb-thumb-color: var(--color-gray-500);
@@ -42,6 +42,7 @@
 
     &::-webkit-scrollbar {
         width: var(--sb-size);
+        height: 2px;
     }
 
     &::-webkit-scrollbar-track {
diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index a481baa8e49..229745c35b0 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 overflow-x-auto overflow-y-hidden bg-white uppercase dark:bg-gray-900',
+                            'st-custom-scrollbar 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',
diff --git a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
index 2cfd13b5755..8b41bf510ef 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -138,7 +138,7 @@ const hoverCardDate = computed(() => {
             <DateRangePickerField v-slot="{ segments }" class="w-full">
                 <div
                     :class="[
-                        'flex items-center w-full overflow-x-auto overflow-y-hidden bg-white dark:bg-gray-900',
+                        'st-custom-scrollbar 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-sm',
                         'shadow-ui-sm not-prose h-10 rounded-lg py-2 px-2.5 disabled:shadow-none',

From ae4355bd192c2b054c8564947b546fde351cb57a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 26 May 2026 16:41:46 +0100
Subject: [PATCH 4/5] Make text smaller for container query

---
 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 229745c35b0..ef737ce71d2 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -178,7 +178,7 @@ const getInputLabel = (part) => {
                         >
                             <Icon name="calendar" class="size-4" />
                         </DatePickerTrigger>
-                        <div class="flex flex-1 items-center @max-xs:text-sm">
+                        <div class="flex flex-1 items-center @max-xs:text-xs">
                             <template v-for="item in segments" :key="item.part">
                                 <div v-if="item.part === 'literal'">
                                     <DatePickerInput
@@ -210,7 +210,7 @@ const getInputLabel = (part) => {
                             :additional-timezones="additionalTimezones"
                             side="top"
                         >
-                            <Text class="text-gray-600! dark:text-gray-400! ms-2.5" size="xs" :text="timeZoneLabel" />
+                            <Text class="text-gray-600! dark:text-gray-400! ms-2" 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 8b41bf510ef..9c242a3fa5a 100644
--- a/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
+++ b/resources/js/components/ui/DateRangePicker/DateRangePicker.vue
@@ -140,7 +140,7 @@ const hoverCardDate = computed(() => {
                     :class="[
                         'st-custom-scrollbar 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-sm',
+                        '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',
                         'data-invalid:border-red-500',
                         'disabled:shadow-none disabled:opacity-50',
@@ -190,7 +190,7 @@ const hoverCardDate = computed(() => {
                         :additional-timezones="additionalTimezones"
                         side="top"
                     >
-                        <Text class="text-gray-600! dark:text-gray-400! ms-2.5" size="xs" :text="timeZoneLabel" />
+                        <Text class="text-gray-600! dark:text-gray-400! ms-2" 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 43f7e612824b9413635911151d655a273c04d1a6 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 26 May 2026 16:44:13 +0100
Subject: [PATCH 5/5] Only make the text small if time is enabled for the date
 picker

---
 resources/js/components/ui/DatePicker/DatePicker.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/resources/js/components/ui/DatePicker/DatePicker.vue b/resources/js/components/ui/DatePicker/DatePicker.vue
index ef737ce71d2..f6eb373a385 100644
--- a/resources/js/components/ui/DatePicker/DatePicker.vue
+++ b/resources/js/components/ui/DatePicker/DatePicker.vue
@@ -117,6 +117,8 @@ const isInvalid = computed(() => {
     return props.modelValue === null && props.required;
 });
 
+const hasTime = computed(() => props.granularity != null && props.granularity !== 'day');
+
 const getInputLabel = (part) => {
     switch (part) {
         case 'day':
@@ -178,7 +180,7 @@ const getInputLabel = (part) => {
                         >
                             <Icon name="calendar" class="size-4" />
                         </DatePickerTrigger>
-                        <div class="flex flex-1 items-center @max-xs:text-xs">
+                        <div class="flex flex-1 items-center" :class="{ '@max-xs:text-xs': hasTime }">
                             <template v-for="item in segments" :key="item.part">
                                 <div v-if="item.part === 'literal'">
                                     <DatePickerInput