fix: v-calendar range picker is overflown in mobile screen (#550)

apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue

@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground',
           )"
         >

apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue

@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground',
           )"
         >

apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue

@@ -117,7 +117,7 @@ const vCalendarSlots = computed(() => {
   @apply p-3 text-center;
 }
 .calendar .vc-pane-layout {
-  @apply grid gap-4;
+  @apply grid gap-4 max-sm:!grid-cols-1;
 }
 .calendar .vc-title {
   @apply text-sm font-medium relative z-20;

apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue

@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground',
           )"
         >

apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue

@@ -26,7 +26,7 @@ const date = ref({
           id="date"
           :variant="'outline'"
           :class="cn(
-            'w-[300px] justify-start text-left font-normal',
+            'w-[280px] justify-start text-left font-normal',
             !date && 'text-muted-foreground',
           )"
         >

apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue

@@ -118,7 +118,7 @@ const vCalendarSlots = computed(() => {
   @apply p-3 text-center;
 }
 .calendar .vc-pane-layout {
-  @apply grid gap-4;
+  @apply grid gap-4 max-sm:!grid-cols-1;
 }
 .calendar .vc-title {
   @apply text-sm font-medium relative z-20;