fix(nc-gui): reduce record size

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

@@ -356,7 +356,7 @@ const parseValue = (value: any, col: ColumnType): string => {
 
 <template>
   <span
-    class="calendar-cell before:px-1"
+    class="calendar-cell text-xs before:px-1"
     :class="{
       'font-bold': bold,
       'italic': italic,

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

@@ -20,22 +20,22 @@ const fields = inject(FieldsInj, ref())
 const { fields: _fields } = useViewColumnsOrThrow()
 
 const getFieldStyle = (field: ColumnType) => {
-  const fi = _fields.value.find((f) => f.title === field.title)
+  const fi = _fields.value?.find((f) => f.title === field.title)
 
   return {
-    underline: fi.underline,
-    bold: fi.bold,
-    italic: fi.italic,
+    underline: fi?.underline,
+    bold: fi?.bold,
+    italic: fi?.italic,
   }
 }
 
-const fieldsWithoutDisplay = computed(() => fields.value.filter((f) => !isPrimary(f)))
+const fieldsWithoutDisplay = computed(() => fields.value?.filter((f) => !isPrimary(f)))
 
 // We loop through all the records and calculate the position of each record based on the range
 // 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 = 40
+  const perRecordHeight = 26
 
   if (!calendarRange.value) return []
 

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

@@ -110,9 +110,9 @@ const recordsToDisplay = computed<{
 
   const perWidth = gridContainerWidth.value / 7
   const perHeight = gridContainerHeight.value / dates.value.length
-  const perRecordHeight = 40
+  const perRecordHeight = 24
 
-  const spaceBetweenRecords = 30
+  const spaceBetweenRecords = 26
 
   // This object is used to keep track of the number of records in a day
   // The key is the date in the format YYYY-MM-DD
@@ -174,10 +174,10 @@ const recordsToDisplay = computed<{
 
         // The top is calculated from the week index and the record index
         // If the record in 1st week and no record in that date them the top will be 0
-        const top = weekIndex * perHeight + spaceBetweenRecords + (recordIndex - 1) * perRecordHeight
+        const top = weekIndex * perHeight + spaceBetweenRecords + (recordIndex - 1) * (perRecordHeight + 4)
 
         // The 25 is obtained from the trial and error
-        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords + 25
+        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords
 
         if (heightRequired > perHeight) {
           style.display = 'none'
@@ -283,7 +283,7 @@ const recordsToDisplay = computed<{
           // The top is calculated from the week index and the record index
           // 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
+          const top = weekIndex * perHeight + spaceBetweenRecords + Math.max(maxRecordCount - 1, 0) * (perRecordHeight + 4)
           const heightRequired = perRecordHeight * maxRecordCount + spaceBetweenRecords
 
           let position = 'rounded'
@@ -308,7 +308,7 @@ const recordsToDisplay = computed<{
 
           // If the height required is more than the height of the week, we hide the record
           // and update the recordsInDay object for all the spanned days
-          if (heightRequired + 15 > perHeight) {
+          if (heightRequired > perHeight) {
             style.display = 'none'
             for (let i = startDayIndex; i <= endDayIndex; i++) {
               const week = dates.value[weekIndex]
@@ -761,7 +761,7 @@ const addRecord = (date: dayjs.Dayjs) => {
               recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflow &&
               !draggingId
             "
-            class="!absolute bottom-1 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
+            class="!absolute bottom-1 right-1 text-center w-15 mx-auto z-3 text-gray-500"
             size="xxsmall"
             type="secondary"
             @click="viewMore(day)"

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

@@ -26,7 +26,7 @@ const emit = defineEmits(['resize-start'])
 <template>
   <div
     :class="{
-      'min-h-9': size === 'small',
+      'h-6': size === 'small',
       'h-full': size === 'auto',
       'rounded-l-md ml-1': position === 'leftRounded',
       'rounded-r-md mr-1': position === 'rightRounded',
@@ -54,7 +54,7 @@ const emit = defineEmits(['resize-start'])
         'bg-pink-500': color === 'pink',
         'bg-purple-500': color === 'purple',
       }"
-      class="w-1 min-h-5 bg-blue-500 rounded-x rounded-y-sm"
+      class="w-1 min-h-4 bg-blue-500 rounded-x rounded-y-sm"
     ></div>
 
     <div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize">
@@ -71,13 +71,13 @@ const emit = defineEmits(['resize-start'])
       </NcButton>
     </div>
 
-    <div class="overflow-hidden items-center flex w-full ml-2 h-8">
+    <div class="overflow-hidden items-center justify-center flex w-full ml-2">
       <span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
       <span
         :class="{
           'pr-7': position === 'leftRounded',
         }"
-        class="text-sm pr-3 mr-3 break-word whitespace-nowrap overflow-hidden text-ellipsis w-full truncate text-gray-800"
+        class="text-sm pr-3 mb-0.5 mr-3 break-word whitespace-nowrap overflow-hidden text-ellipsis w-full truncate text-gray-800"
       >
         <slot />
       </span>

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

@@ -23,7 +23,7 @@ const fields = inject(FieldsInj, ref())
 const { fields: _fields } = useViewColumnsOrThrow()
 
 const getFieldStyle = (field: ColumnType | undefined) => {
-  const fi = _fields.value?.find((f) => f.title === field.title)
+  const fi = _fields.value?.find((f) => f.title === field?.title)
 
   return {
     underline: fi?.underline,
@@ -196,7 +196,7 @@ const calendarData = computed(() => {
             style: {
               width: widthStyle,
               left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 40}px`,
+              top: `${suitableRow * 26}px`,
             },
           },
         })
@@ -222,7 +222,7 @@ const calendarData = computed(() => {
             style: {
               width: `calc(${perDayWidth}px)`,
               left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableRow * 40}px`,
+              top: `${suitableRow * 26}px`,
             },
           },
         })