From 972449f35619db7ec9ffbd34fee53650d31b8a6e Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Fri, 7 Oct 2022 16:22:28 -0230
Subject: [PATCH 1/3] Hide scrollbars on users table

---
 studio/components/interfaces/Auth/Users/Users.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx
index 27021a06f8a..7b98567c2e1 100644
--- a/studio/components/interfaces/Auth/Users/Users.tsx
+++ b/studio/components/interfaces/Auth/Users/Users.tsx
@@ -53,7 +53,7 @@ const Users = () => {
   }
 
   return (
-    <div className="overflow-scroll">
+    <div className="overflow-scroll hide-scrollbar">
       <div className="justify-between px-6 pt-6 pb-2 md:flex">
         <div className="relative flex space-x-4">
           <Input
@@ -109,7 +109,7 @@ const Users = () => {
         </div>
       </div>
       <section className="mt-4 overflow-visible px-6">
-        <div className="section-block--body relative overflow-scroll rounded">
+        <div className="section-block--body relative overflow-scroll rounded hide-scrollbar">
           <div className="inline-block min-w-full align-middle">
             <UsersList />
           </div>

From bfc6966fe9c75f95b48b85dd83150de0cc0f9eec Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 12 Oct 2022 11:55:27 -0230
Subject: [PATCH 2/3] Add custom scrollbar style to users table

---
 .../interfaces/Auth/Users/Users.tsx           |  6 ++--
 studio/pages/_app.tsx                         |  1 +
 studio/styles/users-table.scss                | 32 +++++++++++++++++++
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 studio/styles/users-table.scss

diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx
index 7b98567c2e1..48fc8b5fb3c 100644
--- a/studio/components/interfaces/Auth/Users/Users.tsx
+++ b/studio/components/interfaces/Auth/Users/Users.tsx
@@ -53,7 +53,7 @@ const Users = () => {
   }
 
   return (
-    <div className="overflow-scroll hide-scrollbar">
+    <div>
       <div className="justify-between px-6 pt-6 pb-2 md:flex">
         <div className="relative flex space-x-4">
           <Input
@@ -108,8 +108,8 @@ const Users = () => {
           {inviteEnabled && <InviteUserModal />}
         </div>
       </div>
-      <section className="mt-4 overflow-visible px-6">
-        <div className="section-block--body relative overflow-scroll rounded hide-scrollbar">
+      <section className="users-table-container mt-4 overflow-visible px-6">
+        <div className="section-block--body relative overflow-scroll rounded">
           <div className="inline-block min-w-full align-middle">
             <UsersList />
           </div>
diff --git a/studio/pages/_app.tsx b/studio/pages/_app.tsx
index 64b3e5375c8..deefe6cd8ee 100644
--- a/studio/pages/_app.tsx
+++ b/studio/pages/_app.tsx
@@ -10,6 +10,7 @@ import 'styles/contextMenu.scss'
 import 'styles/react-data-grid-logs.scss'
 import 'styles/date-picker.scss'
 import 'styles/grid.scss'
+import 'styles/users-table.scss'
 
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
diff --git a/studio/styles/users-table.scss b/studio/styles/users-table.scss
new file mode 100644
index 00000000000..c582fb0ff86
--- /dev/null
+++ b/studio/styles/users-table.scss
@@ -0,0 +1,32 @@
+.users-table-container {
+  ::-webkit-scrollbar {
+    background: var(--colors-slate2);
+    height: 3px;
+    width: 0px;
+    border-radius: 0;
+
+    .dark & {
+      background: var(--colors-slate6);
+    }
+  }
+
+  ::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px var(--colors-slate6);
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+
+    .dark & {
+      -webkit-box-shadow: inset 0 0 6px var(--colors-slate8);
+    }
+  }
+
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    background: var(--colors-slate9);
+
+    .dark & {
+      -webkit-box-shadow: inset 0 0 6px var(--colors-slate12);
+    }
+  }
+}

From 87f550780ea4c33149e82a11d278daadf0826d74 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 12 Oct 2022 12:18:38 -0230
Subject: [PATCH 3/3] Address Firefox scroll

---
 studio/components/interfaces/Auth/Users/Users.tsx | 2 +-
 studio/styles/users-table.scss                    | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/studio/components/interfaces/Auth/Users/Users.tsx b/studio/components/interfaces/Auth/Users/Users.tsx
index 48fc8b5fb3c..68f439a4761 100644
--- a/studio/components/interfaces/Auth/Users/Users.tsx
+++ b/studio/components/interfaces/Auth/Users/Users.tsx
@@ -109,7 +109,7 @@ const Users = () => {
         </div>
       </div>
       <section className="users-table-container mt-4 overflow-visible px-6">
-        <div className="section-block--body relative overflow-scroll rounded">
+        <div className="section-block--body relative overflow-x-scroll rounded">
           <div className="inline-block min-w-full align-middle">
             <UsersList />
           </div>
diff --git a/studio/styles/users-table.scss b/studio/styles/users-table.scss
index c582fb0ff86..5bd24e6d6e5 100644
--- a/studio/styles/users-table.scss
+++ b/studio/styles/users-table.scss
@@ -1,4 +1,11 @@
 .users-table-container {
+  scrollbar-width: thin;
+  scrollbar-color: var(--colors-slate9) var(--colors-slate1);
+
+  .dark & {
+    scrollbar-color: var(--colors-slate10) var(--colors-slate3o);
+  }
+
   ::-webkit-scrollbar {
     background: var(--colors-slate2);
     height: 3px;