From 86833917fdc599634678b7b8571387bed4c428a4 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 6 Mar 2024 10:54:36 +0000
Subject: [PATCH] fix(nc-gui): correct spacing

---
 .../components/smartsheet/calendar/DayView/DateField.vue    | 2 +-
 .../nc-gui/components/smartsheet/calendar/MonthView.vue     | 6 +++---
 .../components/smartsheet/calendar/WeekView/DateField.vue   | 4 ++--
 packages/nc-gui/components/smartsheet/calendar/index.vue    | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 5ad88785b2..0c3f6b3c70 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/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 []
 
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 5d12bd7adb..e27cb73a8a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/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>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index 6580052356..12c96c7d16 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/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`,
             },
           },
         })
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index e3b9ab91ee..e54d7d5caa 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/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>