fix:support overlap

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

@@ -444,8 +444,9 @@ const recordsAcrossAllRange = computed<{
     record.rowMeta.style = {
       ...record.rowMeta.style,
       display,
-      width: `calc(${width.toFixed(2)}% - 8px)`,
+      width: `calc(max(${width.toFixed(2)}%, 180px))`,
-      left: `calc(${left.toFixed(2)}% + 4px)`,
+      left: `min(calc(${left.toFixed(2)}% + 4px), calc(100% - max(${width.toFixed(2)}%, 180px) + 4px))`,
+      minWidth: '180px',
     }
   }
 

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

@@ -346,7 +346,8 @@ onClickOutside(searchRef, toggleSearch)
       'right-2': !showSideMenu,
       'right-74': showSideMenu,
     }"
-    class="absolute transition-all ease-in-out z-9 top-2"
+    style="z-index: 100"
+    class="absolute transition-all ease-in-out top-2"
     hide-on-click
   >
     <template #title> {{ $t('activity.toggleSidebar') }}</template>

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

@@ -27,9 +27,15 @@ const emit = defineEmits(['resize-start'])
       'bg-pink-50': color === 'pink',
       'bg-purple-50': color === 'purple',
       'bg-white border-gray-200': color === 'gray',
-      'shadow-md': hover,
+      'z-90': hover,
+    }"
+    :style="{
+      boxShadow: `${
+        hover
+          ? 'box-0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
+          : ' 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)'
+      }`,
     }"
-    style="box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.02)"
     class="relative flex gap-2 border-1 relative rounded-md h-full"
   >
     <div

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

@@ -528,11 +528,21 @@ const recordsAcrossAllRange = computed<{
         width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
 
         left = width * (overlapIndex - 1)
+
+        width = Math.max((width / 100) * containerWidth.value - 8, 72)
+
+        left = majorLeft + (left / 100) * containerWidth.value + 8
+
+        if (majorLeft + perWidth < left + width) {
+          left = majorLeft + (perWidth - width - 4)
         }
+      }
+
       record.rowMeta.style = {
         ...record.rowMeta.style,
-        left: `calc(${majorLeft}px + ${left}% + 4px)`,
+        left: `${left}px`,
-        width: `calc(${width}% - 8px)`,
+        width: `${width}px`,
+        minWidth: '72px',
         display,
       }
     }