fix(nc-gui): overflow & fill cell

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

@@ -159,15 +159,18 @@ const recordsAcrossAllRange = computed<{
         }
 
         // We calculate the index of the hour in the day and set the top and height of the record
-        const hourIndex = Math.max(
+        const hourIndex = Math.min(
+          Math.max(
             datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
             0,
+          ),
+          23,
         )
 
         style = {
           ...style,
-          top: `${hourIndex * perHeight - hourIndex + 6}px`,
-          height: `${perHeight - 10}px`,
+          top: `${hourIndex * perHeight - hourIndex - hourIndex * 0.15}px`,
+          height: `${perHeight - 2}px`,
         }
 
         recordsToDisplay.push({
@@ -489,8 +492,6 @@ const calculateNewRow = (
   const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
   const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
 
-  console.log('day', day, 'hour', hour)
-
   const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour')
   if (!newStartDate) return { newRow: null, updatedProperty: [] }
 
@@ -658,16 +659,20 @@ const viewMore = (hour: dayjs.Dayjs) => {
 </script>
 
 <template>
-  <div class="w-full relative prevent-select" data-testid="nc-calendar-week-view" @drop="dropEvent">
-    <div ref="scrollContainer" class="h-[calc(100vh-9.9rem)] relative flex w-full overflow-y-auto nc-scrollbar-md">
-      <div class="flex sticky h-7.1 z-1 top-0 pl-16 bg-gray-50 w-full top-0">
+  <div
+    ref="scrollContainer"
+    class="h-[calc(100vh-9.9rem)] prevent-select relative flex w-full overflow-y-auto nc-scrollbar-md"
+    data-testid="nc-calendar-week-view"
+    @drop="dropEvent"
+  >
+    <div class="flex sticky h-7.1 z-1 top-0 pl-16 bg-gray-50 w-full">
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
         :class="{
           'text-brand-500': date[0].isSame(dayjs(), 'date'),
         }"
-          class="w-1/7 text-center text-sm text-gray-500 z-1 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
+        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
       >
         {{ dayjs(date[0]).format('DD ddd') }}
       </div>
@@ -714,7 +719,10 @@ const viewMore = (hour: dayjs.Dayjs) => {
         </div>
       </div>
 
-        <div class="absolute pointer-events-none inset-0 !mt-[25px]" data-testid="nc-calendar-week-record-container">
+      <div
+        class="absolute pointer-events-none inset-0 overflow-hidden !mt-[29px]"
+        data-testid="nc-calendar-week-record-container"
+      >
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.records"
           :key="rowIndex"
@@ -734,7 +742,6 @@ const viewMore = (hour: dayjs.Dayjs) => {
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
               color="blue"
-                @resize-start="onResizeStart"
             >
               <template v-if="!isRowEmpty(record, displayField)">
                 <div
@@ -765,14 +772,9 @@ const viewMore = (hour: dayjs.Dayjs) => {
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <style lang="scss" scoped>
-.hide {
-  transition: 0.01s;
-  transform: translateX(-9999px);
-}
 .prevent-select {
   -webkit-user-select: none;
   -ms-user-select: none;