Merge pull request #6737 from nocodb/nc-fix/table-scrollbar-style

Darkened table scrollbar

packages/nc-gui/assets/style.scss

@@ -58,7 +58,7 @@ main {
 }
 
 .mobile {
-  .nc-scrollbar-md, nc-scrollbar-dark-md, nc-scrollbar-dark-md, nc-scrollbar-sm-dark, nc-scrollbar-x-md {
+  .nc-scrollbar-md, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -68,6 +68,7 @@ main {
 .nc-scrollbar-md {
   overflow-y: scroll;
   overflow-x: hidden;
+  scrollbar-width: thin !important;
 
   &::-webkit-scrollbar {
     width: 4px;
@@ -81,16 +82,46 @@ main {
   }
   &::-webkit-scrollbar-thumb {
     width: 4px;
+    @apply bg-gray-200;
+  }
+  &::-webkit-scrollbar-thumb:hover {
     @apply bg-gray-300;
   }
+}
+
+.nc-scrollbar-x-md {
+  overflow-x: scroll;
+  scrollbar-width: thin !important;
+
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track-piece {
+    width: 0px;
+  }
+  &::-webkit-scrollbar {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+
+    width: 4px;
+    @apply bg-gray-200;
+  }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-400;
+    @apply bg-gray-300;
   }
 }
 
 .nc-scrollbar-dark-md {
   overflow-y: scroll;
   overflow-x: hidden;
+  scrollbar-width: thin !important;
+
 
   &::-webkit-scrollbar {
     width: 4px;
@@ -119,13 +150,14 @@ main {
   }
 }
 
-.nc-scrollbar-sm-dark {
+.nc-scrollbar-x-md-dark {
-  overflow-y: scroll;
+  overflow-x: scroll;
-  overflow-x: hidden;
+  scrollbar-width: thin !important;
+
   
   &::-webkit-scrollbar {
-    width: 2px;
+    width: 4px;
-    height: 2px;
+    height: 4px;
   }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
@@ -134,20 +166,26 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+
     width: 4px;
-    @apply bg-gray-300;
+    background-color: rgba(0, 0, 0, 0.3)
+
   }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-400;
+    background-color: rgba(0, 0, 0, 0.4)
+
   }
 }
 
-.nc-scrollbar-x-md {
+.nc-scrollbar-x-lg {
   overflow-x: scroll;
 
   &::-webkit-scrollbar {
-    width: 4px;
+    width: 8px;
-    height: 4px;
+    height: 8px;
   }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
@@ -156,7 +194,11 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    width: 4px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+
+    width: 8px;
     @apply bg-gray-200;
   }
   &::-webkit-scrollbar-thumb:hover {

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -379,7 +379,7 @@ const gridWrapperClass = computed<string>(() => {
   const classes = []
   if (headerOnly !== true) {
     if (!scrollParent.value) {
-      classes.push('nc-scrollbar-x-md overflow-auto')
+      classes.push('nc-scrollbar-x-lg overflow-auto')
     }
   } else {
     classes.push('overflow-visible')