fix(nc-gui): ui fixes

packages/nc-gui/components/nc/DateWeekSelector.vue

@@ -132,7 +132,7 @@ const paginate = (action: 'next' | 'prev') => {
 </script>
 
 <template>
-  <div class="p-4 flex flex-col gap-4">
+  <div class="px-4 pt-3 pb-4 flex flex-col gap-4">
     <div
       :class="{
         'justify-center': disablePagination,
@@ -160,7 +160,7 @@ const paginate = (action: 'next' | 'prev') => {
       </NcTooltip>
     </div>
     <div class="border-1 border-gray-200 rounded-y-xl max-w-[320px]">
-      <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between p-2">
+      <div class="flex flex-row bg-gray-100 gap-2 rounded-t-xl justify-between px-2">
         <span v-for="(day, index) in days" :key="index" class="h-9 flex items-center justify-center w-9 text-gray-500">{{
           day
         }}</span>

packages/nc-gui/components/nc/MonthYearSelector.vue

@@ -83,7 +83,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
 </script>
 
 <template>
-  <div class="p-4 flex flex-col gap-4">
+  <div class="px-4 pt-3 pb-4 flex flex-col gap-4">
     <div class="flex justify-between items-center">
       <NcTooltip>
         <NcButton size="small" type="secondary" @click="paginate('prev')">
@@ -103,7 +103,7 @@ const compareYear = (date1: dayjs.Dayjs, date2: dayjs.Dayjs) => {
         </template>
       </NcTooltip>
     </div>
-    <div class="border-1 border-gray-200 rounded-y-xl max-w-[350px]">
+    <div class="rounded-y-xl max-w-[350px]">
       <div class="grid grid-cols-4 gap-2 p-2">
         <template v-if="!yearPicker">
           <span

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

@@ -865,8 +865,8 @@ const isDateSelected = (date: dayjs.Dayjs) => {
             <template v-if="!isRowEmpty(record, displayField)">
               <div
                 :class="{
-                  '!mt-2': displayField!.uidt === UITypes.SingleLineText,
+                  'mt-1.4': displayField!.uidt === UITypes.SingleLineText,
-                  '!mt-1': displayField!.uidt === UITypes.MultiSelect || displayField!.uidt === UITypes.SingleSelect,
+                  'mt-1': displayField!.uidt === UITypes.MultiSelect || displayField!.uidt === UITypes.SingleSelect,
                 }"
               >
                 <LazySmartsheetVirtualCell

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

@@ -43,38 +43,36 @@ const emit = defineEmits(['resize-start'])
       'group-hover:(border-brand-500 border-2)': resize,
       '!border-brand-500 border-2': selected || hover,
     }"
-    class="relative group border-2 border-white"
+    class="relative flex items-center px-1 group border-2 border-transparent"
   >
-    <div class="h-full absolute py-2">
+    <div
-      <div
+      v-if="position === 'leftRounded' || position === 'rounded'"
-        v-if="position === 'leftRounded' || position === 'rounded'"
+      :class="{
-        :class="{
+        'bg-maroon-500': color === 'maroon',
-          'bg-maroon-500': color === 'maroon',
+        'bg-blue-500': color === 'blue',
-          'bg-blue-500': color === 'blue',
+        'bg-green-500': color === 'green',
-          'bg-green-500': color === 'green',
+        'bg-yellow-500': color === 'yellow',
-          'bg-yellow-500': color === 'yellow',
+        'bg-pink-500': color === 'pink',
-          'bg-pink-500': color === 'pink',
+        'bg-purple-500': color === 'purple',
-          'bg-purple-500': color === 'purple',
+      }"
-        }"
+      class="block h-full min-h-5 w-1 rounded"
-        class="block h-full min-h-5 ml-1 w-1 rounded mr-2"
+    ></div>
-      ></div>
-    </div>
 
     <div
       v-if="(position === 'leftRounded' || position === 'rounded') && resize"
       :class="{
         '!block !border-2 !rounded-lg !border-brand-500': selected || hover,
       }"
-      class="absolute mt-0.6 h-7.1 hidden -left-4 resize"
+      class="mt-0.6 h-7.1 hidden -left-4 resize"
     >
       <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
         <component :is="iconMap.drag" class="text-gray-400"></component>
       </NcButton>
     </div>
 
-    <div class="ml-3 pr-3 text-ellipsis overflow-hidden w-full h-8 absolute">
+    <div class="ml-3 pr-3 overflow-hidden w-full h-8 absolute">
-      <span v-if="position === 'rightRounded' || position === 'none'"> .... </span>
+      <span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
-      <span class="absolute ml-1 text-sm text-gray-800">
+      <span class="absolute text-sm text-gray-800">
         <slot />
       </span>
       <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>

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

@@ -284,7 +284,7 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
       year-picker
     />
 
-    <div class="px-4 relative flex flex-col gap-y-6 pt-4">
+    <div class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-4">
       <div class="flex items-center gap-2">
         <a-input
           v-model:value="searchQuery.value"
@@ -359,20 +359,22 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
               @dragover.prevent
             >
               <template v-if="!isRowEmpty(record, displayField)">
-                <LazySmartsheetVirtualCell
+                <div :class="{}">
-                  v-if="isVirtualCol(displayField)"
+                  <LazySmartsheetVirtualCell
-                  v-model="record.row[displayField.title]"
+                    v-if="isVirtualCol(displayField)"
-                  :column="displayField"
+                    v-model="record.row[displayField.title]"
-                  :row="record"
+                    :column="displayField"
-                />
+                    :row="record"
+                  />
 
-                <LazySmartsheetCell
+                  <LazySmartsheetCell
-                  v-else
+                    v-else
-                  v-model="record.row[displayField.title]"
+                    v-model="record.row[displayField.title]"
-                  :column="displayField"
+                    :column="displayField"
-                  :edit-enabled="false"
+                    :edit-enabled="false"
-                  :read-only="true"
+                    :read-only="true"
-                />
+                  />
+                </div>
               </template>
             </LazySmartsheetCalendarSideRecordCard>
           </LazySmartsheetRow>

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

@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 <template>
   <div class="border-1 cursor-pointer border-gray-200 items-center px-2 py-3 rounded-lg">
-    <div class="flex items-center">
+    <div class="flex items-center gap-2">
       <span
         :class="{
           'bg-maroon-500': props.color === 'maroon',
@@ -29,8 +29,8 @@ const props = withDefaults(defineProps<Props>(), {
         }"
         class="block h-10 w-1 rounded"
       ></span>
-      <div class="flex flex-col gap-1 ml-3">
+      <div class="flex text-ellipsis gap-1 flex-col">
-        <span class="text-sm max-w-36 h-8 truncate text-gray-800">
+        <span class="text-sm max-w-40 truncate text-gray-800">
           <slot />
         </span>
         <span v-if="showDate" class="text-xs text-gray-500">{{ fromDate }} {{ toDate ? ` - ${toDate}` : '' }}</span>

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

@@ -131,9 +131,13 @@ const headerText = computed(() => {
     case 'day':
       return dayjs(selectedDate.value).format('D MMMM YYYY')
     case 'week':
-      return `${dayjs(selectedDateRange.value.start).format('D MMM YYYY')} - ${dayjs(selectedDateRange.value.end).format(
+      if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'month')) {
-        'D MMM YYYY',
+        return `${selectedDateRange.value.start.format('D')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
-      )}`
+      } else if (selectedDateRange.value.start.isSame(selectedDateRange.value.end, 'year')) {
+        return `${selectedDateRange.value.start.format('D MMM')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
+      } else {
+        return `${selectedDateRange.value.start.format('D MMM YYYY')} - ${selectedDateRange.value.end.format('D MMM YYYY')}`
+      }
     case 'month':
       return dayjs(selectedMonth.value).format('MMMM YYYY')
     case 'year':