fix(nc-gui): correct spacing

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -35,7 +35,7 @@ const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrima
 // We only need to calculate the top, of the record since there is no overlap in the day view of date Field
 const recordsAcrossAllRange = computed<Row[]>(() => {
   let dayRecordCount = 0
-  const perRecordHeight = 26
+  const perRecordHeight = 28
 
   if (!calendarRange.value) return []
 

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

@@ -177,7 +177,7 @@ const recordsToDisplay = computed<{
         const top = weekIndex * perHeight + spaceBetweenRecords + (recordIndex - 1) * (perRecordHeight + 4)
 
         // The 25 is obtained from the trial and error
-        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords + 13
+        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords + 12
 
         if (heightRequired > perHeight) {
           style.display = 'none'
@@ -284,7 +284,7 @@ const recordsToDisplay = computed<{
           // If the record in 1st week and no record in that date them the top will be 0
           // If the record in 1st week and 1 record in that date then the top will be perRecordHeight + spaceBetweenRecords
           const top = weekIndex * perHeight + spaceBetweenRecords + Math.max(maxRecordCount - 1, 0) * (perRecordHeight + 4)
-          const heightRequired = perRecordHeight * maxRecordCount + spaceBetweenRecords + 13
+          const heightRequired = perRecordHeight * Math.max(maxRecordCount, 0) + spaceBetweenRecords + 12
 
           let position = 'rounded'
           // Here we are checking if the startDay is before all the dates shown in UI rather that the current month
@@ -766,7 +766,7 @@ const addRecord = (date: dayjs.Dayjs) => {
             type="secondary"
             @click="viewMore(day)"
           >
-            <span class="text-xs px-0.5"> + {{ recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflowCount }} </span>
+            <span class="text-xs px-1"> + {{ recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflowCount }} </span>
           </NcButton>
         </div>
       </div>

packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@@ -196,7 +196,7 @@ const calendarData = computed(() => {
             style: {
               width: widthStyle,
               left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 26}px`,
+              top: `${suitableRow * 28}px`,
             },
           },
         })
@@ -222,7 +222,7 @@ const calendarData = computed(() => {
             style: {
               width: `calc(${perDayWidth}px)`,
               left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 26}px`,
+              top: `${suitableRow * 28}px`,
             },
           },
         })

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

@@ -169,7 +169,7 @@ const headerText = computed(() => {
 <template>
   <div class="flex h-full flex-row" data-testid="nc-calendar-wrapper">
     <div class="flex flex-col w-full">
-      <div class="flex justify-between p-3 items-center border-b-1 border-gray-200" data-testid="nc-calendar-topbar">
+      <div class="flex justify-between p-2 items-center border-b-1 border-gray-200" data-testid="nc-calendar-topbar">
         <div class="flex justify-start gap-3 items-center">
           <NcTooltip>
             <template #title> {{ $t('labels.previous') }}</template>