fix: Darkened table scrollbar

packages/nc-gui/assets/style.scss

@@ -54,7 +54,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-dark-md, .nc-scrollbar-dark-md, .nc-scrollbar-sm-dark, .nc-scrollbar-x-md, .nc-scrollbar-x-md-dark {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -160,6 +160,29 @@ main {
   }
 }
 
+
+.nc-scrollbar-x-md-dark {
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track-piece {
+    width: 0px;
+  }
+  &::-webkit-scrollbar {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    width: 4px;
+    @apply bg-gray-300 !bg-opacity-100;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400;
+  }
+}
+
 html {
   overflow-y: auto !important;
 }

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

@@ -371,7 +371,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-md-dark overflow-auto')
     }
   } else {
     classes.push('overflow-visible')