Merge pull request #7889 from nocodb/nc-fix/scroll-behavior

Nc fix/scroll behavior

packages/nc-gui/assets/style.scss

@@ -65,7 +65,7 @@ main {
 }
 
 .nc-scrollbar-md {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -89,7 +89,7 @@ main {
 }
 
 .nc-scrollbar-lg {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -113,7 +113,7 @@ main {
 }
 
 .nc-scrollbar-x-md {
-  overflow-x: scroll;
+  overflow-x: auto !important;
   scrollbar-width: thin !important;
 
 
@@ -141,7 +141,7 @@ main {
 }
 
 .nc-scrollbar-dark-md {
-  overflow-y: scroll;
+  overflow-y: auto !important;
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
@@ -174,7 +174,7 @@ main {
 }
 
 .nc-scrollbar-x-md-dark {
-  overflow-x: scroll;
+  overflow-x: auto !important;
   scrollbar-width: thin !important;
 
   
@@ -204,7 +204,7 @@ main {
 }
 
 .nc-scrollbar-x-lg {
-  overflow-x: scroll;
+  overflow-x: auto !important;
 
   &::-webkit-scrollbar {
     width: 8px;

packages/nc-gui/components/account/AppStore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2 px-5">
+  <div class="h-full overflow-y-auto scrollbar-thin-dull pt-2 px-5">
     <div class="text-xl mt-4 mb-8 text-left font-weight-bold">{{ $t('title.appStore') }}</div>
     <div>
       <LazyDashboardSettingsAppStore />

packages/nc-gui/components/account/License.vue

@@ -36,7 +36,7 @@ loadLicense()
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull">
+  <div class="h-full overflow-y-auto scrollbar-thin-dull">
     <!--    <div class="text-xl mt-4 mb-8 text-center font-weight-bold">License</div>-->
     <!--    <div class="mx-auto w-150">-->
     <!--      <div>-->

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

@@ -109,7 +109,7 @@ const onChange = (value: string) => {
   @apply !rounded-xl py-1.5;
 
   .rc-virtual-list-holder {
-    overflow-y: scroll;
+    overflow-y: auto;
     overflow-x: hidden;
     font-weight: 500;
 

packages/nc-gui/components/project/ShareBaseDlg.vue

@@ -235,7 +235,7 @@ const onRoleChange = (role: keyof typeof RoleLabels) => (inviteData.roles = role
         <div class="flex justify-between gap-3 w-full">
           <div
             ref="divRef"
-            class="flex items-center border-1 gap-1 w-full overflow-x-scroll nc-scrollbar-x-md items-center h-10 rounded-lg !min-w-96"
+            class="flex items-center border-1 gap-1 w-full overflow-x-auto nc-scrollbar-x-md items-center h-10 rounded-lg !min-w-96"
             tabindex="0"
             :class="{
               'border-primary/100': isDivFocused,

packages/nc-gui/pages/account/index/users/[[nestedPage]].vue

@@ -5,7 +5,7 @@ const { isUIAllowed } = useRoles()
 </script>
 
 <template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
+  <div class="h-full overflow-y-auto scrollbar-thin-dull pt-2">
     <template
       v-if="
         $route.params.nestedPage === 'password-reset' ||