From 2ae9bbf0e9abe33c297ee0810f211b71d3b0a515 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:19 +0000
Subject: [PATCH] fix(nc-gui): scrollbar mac issue

---
 .../calendar/WeekView/DateTimeField.vue        |  5 +++--
 packages/nc-gui/utils/browserUtils.ts          | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 08c41ada1a..49f48ff065 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '~/lib'
 import { computed, ref } from '#imports'
-import { generateRandomNumber, isRowEmpty } from '~/utils'
+import { generateRandomNumber, getScrollbarWidth, isRowEmpty } from '~/utils'
 
 const emits = defineEmits(['expandRecord'])
 
@@ -725,12 +725,13 @@ const viewMore = (hour: dayjs.Dayjs) => {
 
 <template>
   <div class="w-full relative prevent-select" @drop="dropEvent">
-    <div class="flex absolute w-full top-0">
+    <div class="flex absolute bg-gray-50 w-full top-0">
       <div
         v-for="date in datesHours"
         :key="date[0].toISOString()"
         :class="{
           'text-brand-500': date[0].isSame(dayjs(), 'date'),
+          'last:mr-2.75': getScrollbarWidth() > 0,
         }"
         class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 bg-gray-50"
       >
diff --git a/packages/nc-gui/utils/browserUtils.ts b/packages/nc-gui/utils/browserUtils.ts
index fa2a882ed6..8f2f4b7ec2 100644
--- a/packages/nc-gui/utils/browserUtils.ts
+++ b/packages/nc-gui/utils/browserUtils.ts
@@ -4,3 +4,21 @@ export const isDrawerExist = () => document.querySelector('.ant-drawer-open')
 export const isDrawerOrModalExist = () => document.querySelector('.ant-modal.active, .ant-drawer-open')
 export const isExpandedCellInputExist = () => document.querySelector('.expanded-cell-input')
 export const cmdKActive = () => document.querySelector('.cmdk-modal-active')
+
+export const getScrollbarWidth = () => {
+  const outer = document.createElement('div')
+  outer.style.visibility = 'hidden'
+  outer.style.width = '100px'
+  document.body.appendChild(outer)
+
+  const widthNoScroll = outer.offsetWidth
+  outer.style.overflow = 'scroll'
+
+  const inner = document.createElement('div')
+  inner.style.width = '100%'
+  outer.appendChild(inner)
+
+  const widthWithScroll = inner.offsetWidth
+  outer.parentNode.removeChild(outer)
+  return widthNoScroll - widthWithScroll
+}