From f1cce796785a23ae75bf37a81a1033648909fedd Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Tue, 20 May 2025 14:56:45 +0200
Subject: [PATCH] improve DatePicker sizing in report create modal

---
 .../Common/Report/ReportCreateModal.vue       |  4 ++--
 .../Common/Report/ReportEditModal.vue         |  4 +++-
 .../js/packages/ui/src/Input/DatePicker.vue   | 19 +++++++++++++------
 .../ui/src/Input/TimeRangeSelector.vue        |  2 ++
 .../ui/src/TimeEntry/TimeEntryCreateModal.vue |  2 ++
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
index 085b7989..1d4ecd7b 100644
--- a/resources/js/Components/Common/Report/ReportCreateModal.vue
+++ b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -103,13 +103,13 @@ async function submit() {
                     <div
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
-                        <div>
+                        <div class="w-full">
                             <InputLabel for="public_until" value="Expires at" />
                             <div class="text-text-tertiary font-medium">
                                 (optional)
                             </div>
                         </div>
-                        <DatePicker id="public_until"></DatePicker>
+                        <DatePicker id="public_until" size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/Components/Common/Report/ReportEditModal.vue b/resources/js/Components/Common/Report/ReportEditModal.vue
index 6d9b161d..3224fd55 100644
--- a/resources/js/Components/Common/Report/ReportEditModal.vue
+++ b/resources/js/Components/Common/Report/ReportEditModal.vue
@@ -118,7 +118,9 @@ async function submit() {
                         v-if="report.is_public"
                         class="flex items-center space-x-4">
                         <InputLabel for="public_until" value="Expires at" />
-                        <DatePicker id="public_until"></DatePicker>
+                        <DatePicker 
+                        id="public_until"
+                        size="input"></DatePicker>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/packages/ui/src/Input/DatePicker.vue b/resources/js/packages/ui/src/Input/DatePicker.vue
index 4d418512..7259e0e7 100644
--- a/resources/js/packages/ui/src/Input/DatePicker.vue
+++ b/resources/js/packages/ui/src/Input/DatePicker.vue
@@ -4,7 +4,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from '@/Components/ui/popover';
-import { Button } from '@/Components/ui/button';
+import { Button, type ButtonVariants } from '@/Components/ui/button';
 import { Calendar } from '@/Components/ui/calendar';
 import { CalendarIcon } from 'lucide-vue-next';
 import { formatDateLocalized } from '@/packages/ui/src/utils/time';
@@ -16,6 +16,7 @@ import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
 const props = defineProps<{
     class?: string;
     tabindex?: string;
+    size: ButtonVariants['size'];
 }>();
 
 const model = defineModel<string | null>();
@@ -52,14 +53,21 @@ const organization = inject<ComputedRef<Organization>>('organization');
         <PopoverTrigger as-child>
             <Button
                 variant="input"
-                size="sm"
+                :size="size"
                 :class="[
-                    'w-full gap-1.5 justify-center text-left font-normal',
+                    size === 'sm' ? 'gap-1.5' : 'gap-2',
+                    'w-full justify-center text-left font-normal',
                     !model && 'text-muted-foreground',
                     props.class,
                 ]"
                 :tabindex="tabindex">
-                <CalendarIcon class="h-3 w-3" />
+                <CalendarIcon
+:class="[
+                    size === 'xs' ? 'h-3 w-3' : 
+                    size === 'sm' ? 'h-3 w-3' : 
+                    size === 'lg' ? 'h-4.5 w-4.5' : 
+                    'h-4 w-4'
+                ]" />
                 <span class="text-center">
                     {{
                         model
@@ -77,8 +85,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
                 mode="single"
                 :model-value="date"
                 :initial-focus="true"
-                @update:model-value="handleChange"
-                />
+                @update:model-value="handleChange" />
         </PopoverContent>
     </Popover>
 </template>
diff --git a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
index a6e4ffce..4e0f2bd8 100644
--- a/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
+++ b/resources/js/packages/ui/src/Input/TimeRangeSelector.vue
@@ -84,6 +84,7 @@ watch(focused, (newValue, oldValue) => {
         <div class="px-2 pt-2">
             <DatePicker
                 v-model="tempStart"
+                size="sm"
                 class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
                 @changed="updateTimeEntry"></DatePicker>
         </div>
@@ -91,6 +92,7 @@ watch(focused, (newValue, oldValue) => {
             <DatePicker
                 v-if="tempEnd !== null"
                 v-model="tempEnd"
+                size="sm"
                 class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
                 @changed="updateTimeEntry"></DatePicker>
         </div>
diff --git a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
index ecce0a0e..4a9d61d1 100644
--- a/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
+++ b/resources/js/packages/ui/src/TimeEntry/TimeEntryCreateModal.vue
@@ -257,9 +257,11 @@ type BillableOption = {
                     </div>
                     <DatePicker
                         v-model="localStart"
+                        size="sm"
                         class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                     <DatePicker
                         v-model="localEnd"
+                        size="sm"
                         class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
                 </div>
             </div>