From 7d599da66412d246e66a8eec9ad26358ab9c3711 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Oct 2023 10:01:28 +0000
Subject: [PATCH] fix: Improved scrollbar style and adding more padding to
 table

---
 packages/nc-gui/assets/style.scss             | 64 +++++++++++--------
 .../components/smartsheet/grid/Table.vue      |  4 +-
 2 files changed, 40 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index d235ec9450..55e1de60c5 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/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-x-md-dark {
+  .nc-scrollbar-md, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -77,26 +77,20 @@ main {
   }
   &::-webkit-scrollbar-thumb {
     width: 4px;
-    @apply bg-gray-300;
+    @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;
+.nc-scrollbar-x-md {
+  overflow-x: scroll;
 
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
   }
-
-  &::-webkit-scrollbar-track {
-    -webkit-border-radius: 10px;
-    border-radius: 10px;
-  }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
   }
@@ -107,21 +101,27 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
+
     width: 4px;
-    @apply bg-gray-300;
+    @apply bg-gray-200;
   }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-400;
+    @apply bg-gray-300;
   }
 }
 
-.nc-scrollbar-sm-dark {
+.nc-scrollbar-dark-md {
   overflow-y: scroll;
   overflow-x: hidden;
 
   &::-webkit-scrollbar {
-    width: 2px;
-    height: 2px;
+    width: 4px;
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
   }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
@@ -130,6 +130,9 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
     width: 4px;
     @apply bg-gray-300;
   }
@@ -138,7 +141,7 @@ main {
   }
 }
 
-.nc-scrollbar-x-md {
+.nc-scrollbar-x-md-dark {
   overflow-x: scroll;
 
   &::-webkit-scrollbar {
@@ -152,21 +155,26 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+
     width: 4px;
-    @apply bg-gray-200;
+    background-color: rgba(0, 0, 0, 0.3)
+
   }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-300;
+    background-color: rgba(0, 0, 0, 0.4)
+
   }
 }
 
-
-.nc-scrollbar-x-md-dark {
+.nc-scrollbar-x-lg {
   overflow-x: scroll;
 
   &::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
+    width: 6px;
+    height: 6px;
   }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
@@ -175,11 +183,15 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
-    width: 4px;
-    @apply bg-gray-300 !bg-opacity-100;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
+
+    width: 6px;
+    @apply bg-gray-200;
   }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-400;
+    @apply bg-gray-300;
   }
 }
 
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 9b61fb9afe..2d49f85a53 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/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-dark overflow-auto')
+      classes.push('nc-scrollbar-x-lg overflow-auto')
     }
   } else {
     classes.push('overflow-visible')
@@ -1209,7 +1209,7 @@ const loaderText = computed(() => {
         <div class="table-overlay" :class="{ 'nc-grid-skelton-loader': showSkeleton }">
           <table
             ref="smartTable"
-            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white relative"
+            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white relative pr-60 pb-12"
             :class="{
               mobile: isMobileMode,
               desktop: !isMobileMode,