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

unovue · May 14, 2024 · 7f73e4d · 7f73e4d
1 parent ead6ad8
commit 7f73e4d
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 8 deletions.
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue b/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',
           )"
         >

diff --git a/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue b/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',
           )"
         >

diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue b/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;

diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue b/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',
           )"
         >

diff --git a/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue b/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',
           )"
         >

diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue b/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;

diff --git a/apps/www/src/public/registry/styles/default/v-calendar.json b/apps/www/src/public/registry/styles/default/v-calendar.json
diff --git a/apps/www/src/public/registry/styles/new-york/v-calendar.json b/apps/www/src/public/registry/styles/new-york/v-calendar.json