Skip to content

[6.x] Date scrollbar fix#14730

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jaygeorge merged 5 commits into from
May 26, 2026
Merged

[6.x] Date scrollbar fix #14730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cd0488f
Tighten up datepicker spacing with a container query
jaygeorge May 26, 2026
a278bcd
Make custom scrollbar size more usable
jaygeorge May 26, 2026
84d17d9
Add a height property to the custom scrollbar and add it to the date/…
jaygeorge May 26, 2026
ae4355b
Make text smaller for container query
jaygeorge May 26, 2026
43f7e61
Only make the text small if time is enabled for the date picker
jaygeorge May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion resources/css/core/utilities.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,7 +31,7 @@
}

@utility st-custom-scrollbar {
--sb-size: 3px;
--sb-size: 4px;
--sb-thumb-color: var(--color-gray-400);
&:where(.dark, .dark *) {
--sb-thumb-color: var(--color-gray-500);
Expand All@@ -42,6 +42,7 @@

&::-webkit-scrollbar {
width: var(--sb-size);
height: 2px;
}

&::-webkit-scrollbar-track {
Expand Down
8 changes: 5 additions & 3 deletions resources/js/components/ui/DatePicker/DatePicker.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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':
Expand DownExpand Up@@ -159,7 +161,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',
Expand All@@ -178,7 +180,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" :class="{ '@max-xs:text-xs': hasTime }">
<template v-for="item in segments" :key="item.part">
<div v-if="item.part === 'literal'">
<DatePickerInput
Expand DownExpand Up@@ -210,7 +212,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" size="xs" :text="timeZoneLabel" />
</TimezoneHoverCard>
<Button
v-if="clearable && !readOnly"
Expand Down
6 changes: 3 additions & 3 deletions resources/js/components/ui/DateRangePicker/DateRangePicker.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -138,9 +138,9 @@ 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',
'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',
Expand DownExpand Up@@ -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" 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>
Expand Down
Loading