fix(nc-gui): change size automatically

packages/nc-gui/components/nc/DateWeekSelector.vue

@@ -202,7 +202,7 @@ const paginate = (action: 'next' | 'prev') => {
             'text-[10px]': size === 'small',
           }"
           class="flex items-center uppercase justify-center text-gray-500"
-          >{{ size === 'small' ? day[0] : day }}</span
+          >{{ day[0] }}</span
         >
       </div>
       <div
@@ -240,7 +240,7 @@ const paginate = (action: 'next' | 'prev') => {
               'h-1.5 w-1.5': size === 'large',
               'h-1 w-1': size === 'medium',
               'h-0.75 w-0.75': size === 'small',
-              'top-1 right-1': size != 'small',
+              'top-1 right-1': size !== 'small',
               'top-0.5 right-0.5': size === 'small',
             }"
             class="absolute z-2 rounded-full bg-brand-500"

packages/nc-gui/components/smartsheet/calendar/YearView.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const { selectedDate, activeDates, calendarMetaData } = useCalendarViewStoreOrThrow()
+const { selectedDate, activeDates } = useCalendarViewStoreOrThrow()
 
 const months = computed(() => {
   const months = []
@@ -9,24 +9,43 @@ const months = computed(() => {
   return months
 })
 
-const size = computed(() => calendarMetaData.value?.meta?.yearViewSize ?? 'small')
+const calendarContainer = ref<HTMLElement | null>(null)
+
+const { width } = useWindowSize()
+
+const size = ref('small')
+
+const handleResize = () => {
+  if (width.value < 1608) {
+    size.value = 'small'
+  } else if (width.value < 2000) {
+    size.value = 'medium'
+  } else {
+    size.value = 'large'
+  }
+}
+
+onMounted(() => {
+  handleResize()
+})
+
+watch(width, handleResize)
 </script>
 
 <template>
-  <div
-    class="flex flex-wrap gap-3 py-3 items-center justify-center overflow-auto nc-scrollbar-md"
-    data-testid="nc-calendar-year-view"
-  >
-    <NcDateWeekSelector
-      v-for="(_, index) in months"
-      :key="index"
-      v-model:active-dates="activeDates"
-      v-model:page-date="months[index]"
-      v-model:selected-date="selectedDate"
-      :size="size"
-      data-testid="nc-calendar-year-view-month-selector"
-      disable-pagination
-    />
+  <div ref="calendarContainer" class="overflow-auto flex my-3 justify-center nc-scrollbar-md">
+    <div class="grid grid-cols-4 justify-items-center gap-3" data-testid="nc-calendar-year-view">
+      <NcDateWeekSelector
+        v-for="(_, index) in months"
+        :key="index"
+        v-model:active-dates="activeDates"
+        v-model:page-date="months[index]"
+        v-model:selected-date="selectedDate"
+        :size="size"
+        data-testid="nc-calendar-year-view-month-selector"
+        disable-pagination
+      />
+    </div>
   </div>
 </template>
 

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -54,7 +54,6 @@ const {
   pageDate,
   showSideMenu,
   selectedDateRange,
-  updateCalendarMeta,
   paginateCalendarView,
 } = useCalendarViewStoreOrThrow()
 
@@ -166,14 +165,6 @@ const headerText = computed(() => {
       return dayjs(selectedDate.value).format('YYYY')
   }
 })
-
-const updateCalendarSize = async (size: string) => {
-  await updateCalendarMeta({
-    meta: {
-      yearViewSize: size,
-    },
-  })
-}
 </script>
 
 <template>
@@ -261,30 +252,6 @@ const updateCalendarSize = async (size: string) => {
               {{ $t('activity.goToToday') }}
             </span>
           </NcButton>
-          <NcDropdown v-if="activeCalendarView === 'year'" :auto-close="false" :trigger="['click']">
-            <NcButton
-              v-if="!isMobileMode"
-              v-e="`['c:calendar:calendar-${activeCalendarView}-toggle-sidebar']`"
-              data-testid="nc-calendar-side-bar-btn"
-              size="small"
-              type="secondary"
-            >
-              Calendar Size
-            </NcButton>
-            <template #overlay>
-              <NcMenu>
-                <NcMenuItem
-                  v-for="size in ['small', 'medium', 'large']"
-                  :key="size"
-                  class="capitalize"
-                  data-testid="nc-calendar-view-size"
-                  @click="updateCalendarSize(size)"
-                >
-                  {{ size }}
-                </NcMenuItem>
-              </NcMenu>
-            </template>
-          </NcDropdown>
           <span class="opacity-0" data-testid="nc-active-calendar-view">
             {{ activeCalendarView }}
           </span>