improve DatePicker sizing in report create modal

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>

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>

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>

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>

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>