From 53f076873df94a4f1011e8e3449a253d95697fa1 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:15 +0000
Subject: [PATCH] fix(nc-gui): incorrect styling

---
 .../components/smartsheet/calendar/VRecordCard.vue       | 6 +++---
 .../smartsheet/calendar/WeekView/DateTimeField.vue       | 9 +++++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
index e0d2786eb9..df85b36382 100644
--- a/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
@@ -26,7 +26,7 @@ const emit = defineEmits(['resize-start'])
   >
     <NcButton
       :class="{
-        '!flex border-2 rounded-lg border-brand-500': selected,
+        '!flex border-2 rounded-lg border-brand-500': selected || hover,
       }"
       class="!group-hover:(border-brand-500) !border-2 cursor-ns-resize"
       size="xsmall"
@@ -51,7 +51,7 @@ const emit = defineEmits(['resize-start'])
       'group-hover:(border-brand-500)': resize,
       '!border-brand-500 border-2': selected || hover,
     }"
-    class="relative h-full border-2 border-white"
+    class="relative h-full ml-0.25 border-2 border-gray-50"
   >
     <div class="h-full absolute py-2">
       <div
@@ -82,7 +82,7 @@ const emit = defineEmits(['resize-start'])
   >
     <NcButton
       :class="{
-        '!flex border-2 rounded-lg z-1 cursor-ns-resize	border-brand-500': selected,
+        '!flex border-2 rounded-lg z-1 cursor-ns-resize	border-brand-500': selected || hover,
       }"
       class="!group-hover:(border-brand-500) !border-2"
       size="xsmall"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 8f89c2543c..268f4c33a8 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -150,7 +150,7 @@ const recordsAcrossAllRange = computed<{
         style = {
           ...style,
           top: `${hourIndex * perHeight}px`,
-          height: `${perHeight / 2 - 30}px`,
+          height: `${perHeight / 1.5}px`,
         }
 
         recordsToDisplay.push({
@@ -320,6 +320,8 @@ const resizeInProgress = ref(false)
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
+const hoverRecord = ref<string | null>()
+
 const resizeDirection = ref<'right' | 'left' | null>()
 const resizeRecord = ref<Row | null>()
 
@@ -764,7 +766,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
         </div>
       </div>
 
-      <div class="absolute pointer-events-none inset-0 !mt-[20px]">
+      <div class="absolute pointer-events-none inset-0 !mt-[25px]">
         <div
           v-for="(record, rowIndex) in recordsAcrossAllRange.records"
           :key="rowIndex"
@@ -772,10 +774,13 @@ const viewMore = (hour: dayjs.Dayjs) => {
           :style="record.rowMeta!.style"
           class="absolute draggable-record w-1/7 group cursor-pointer pointer-events-auto"
           @mousedown="dragStart($event, record)"
+          @mouseleave="hoverRecord = null"
+          @mouseover="hoverRecord = record.rowMeta.id"
           @dragover.prevent
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
+              :hover="hoverRecord === record.rowMeta.id"
               :position="record.rowMeta!.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"