feat(nc-gui): sidebar scroll issue

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

@@ -287,15 +287,17 @@ onUnmounted(() => {
 <template>
   <div
     :class="{
-      'w-0': !props.visible,
-      'w-1/6 min-w-[22.1rem] nc-calendar-side-menu-open': props.visible,
+      '!w-0': !props.visible,
+      'min-w-[356px]': width > 1440 && props.visible,
+      'min-w-[264px]': width <= 1440 && props.visible,
+      'nc-calendar-side-menu-open': props.visible,
     }"
     class="h-full border-l-1 border-gray-200 transition-all"
     data-testid="nc-calendar-side-menu"
   >
     <div
       :class="{
-        '!hidden': width < 1440,
+        '!hidden': width <= 1440,
         'px-4 pt-3 pb-4 ': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
       }"
       class="flex flex-col"
@@ -328,11 +330,11 @@ onUnmounted(() => {
 
     <div
       :class="{
-        '!border-t-0': width < 1440,
+        '!border-t-0': width <= 1440,
       }"
-      class="px-4 border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
+      class="border-t-1 border-gray-200 relative flex flex-col gap-y-4 pt-3"
     >
-      <div class="flex items-center gap-2">
+      <div class="flex px-4 items-center gap-2">
         <a-input
           v-model:value="searchQuery.value"
           :class="{
@@ -370,11 +372,12 @@ onUnmounted(() => {
         v-if="calendarRange"
         :ref="sideBarListRef"
         :class="{
-          '!h-[calc(100vh-10.5rem)]': width < 1440,
-        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width > 1440,
-        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width > 1440,
+         '!h-[calc(100vh-10.5rem)]': width <= 1440,
+        'h-[calc(100vh-36.2rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const) && width >= 1440,
+        'h-[calc(100vh-25.1rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const)  && width >= 1440,
+   
       }"
-        class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
+        class="nc-scrollbar-md pl-4 pr-4 overflow-y-auto"
         data-testid="nc-calendar-side-menu-list"
         @scroll="sideBarListScrollHandle"
       >
@@ -398,6 +401,7 @@ onUnmounted(() => {
           </div>
         </div>
         <template v-else-if="renderData.length > 0">
+          <div class="gap-2 flex flex-col">
             <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record">
               <LazySmartsheetCalendarSideRecordCard
                 :draggable="sideBarFilterOption === 'withoutDates' && activeCalendarView !== 'year'"
@@ -448,6 +452,7 @@ onUnmounted(() => {
                 </template>
               </LazySmartsheetCalendarSideRecordCard>
             </LazySmartsheetRow>
+          </div>
         </template>
       </div>
     </div>

packages/nc-gui/utils/browserUtils.ts

@@ -19,6 +19,6 @@ export const getScrollbarWidth = () => {
   outer.appendChild(inner)
 
   const widthWithScroll = inner.offsetWidth
-  outer.parentNode.removeChild(outer)
+  outer?.parentNode?.removeChild(outer)
   return widthNoScroll - widthWithScroll
 }