From 7b82ed272264827863d4b0af5125364be74ac026 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 23 Oct 2024 21:08:41 -0400
Subject: [PATCH] feat: stable scrollbars

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/App.css                          |  1 +
 .../components/AccountNotifications.tsx       |  2 +-
 src/renderer/components/NotificationRow.tsx   |  2 +-
 .../components/RepositoryNotifications.tsx    |  2 +-
 .../AccountNotifications.test.tsx.snap        | 30 +++++++++----------
 .../NotificationRow.test.tsx.snap             | 12 ++++----
 .../RepositoryNotifications.test.tsx.snap     | 14 ++++-----
 7 files changed, 32 insertions(+), 31 deletions(-)
diff --git a/src/renderer/App.css b/src/renderer/App.css
index dbd60cc2d..e22f3aec1 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -3,6 +3,7 @@ body,
 #root {
   height: 100%;
   -webkit-user-select: none;
+  scrollbar-gutter: stable;
 }
 
 html::-webkit-scrollbar,
diff --git a/src/renderer/components/AccountNotifications.tsx b/src/renderer/components/AccountNotifications.tsx
index cc9f6bdce..7a6d495a8 100644
--- a/src/renderer/components/AccountNotifications.tsx
+++ b/src/renderer/components/AccountNotifications.tsx
@@ -74,7 +74,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
       {showAccountHeader && (
         <div
           className={cn(
-            'group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white',
+            'group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white',
             props.error
               ? 'bg-red-300 dark:bg-red-500'
               : 'bg-gray-300 dark:bg-gray-darkest',
diff --git a/src/renderer/components/NotificationRow.tsx b/src/renderer/components/NotificationRow.tsx
index 3bd305433..60c5ec32c 100644
--- a/src/renderer/components/NotificationRow.tsx
+++ b/src/renderer/components/NotificationRow.tsx
@@ -90,7 +90,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     <div
       id={notification.id}
       className={cn(
-        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
+        'group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,
diff --git a/src/renderer/components/RepositoryNotifications.tsx b/src/renderer/components/RepositoryNotifications.tsx
index f48d64377..a85e60d62 100644
--- a/src/renderer/components/RepositoryNotifications.tsx
+++ b/src/renderer/components/RepositoryNotifications.tsx
@@ -45,7 +45,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   return (
     <>
       <div
-        className="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+        className="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
         onClick={toggleRepositoryNotifications}
       >
         <div
diff --git a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
index bbc1ca768..62b203179 100644
--- a/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-red-300 dark:bg-red-500 opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-red-300 dark:bg-red-500 opacity-70"
       >
         <div
           class="flex"
@@ -152,7 +152,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - acc
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-red-300 dark:bg-red-500 opacity-70"
+      class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-red-300 dark:bg-red-500 opacity-70"
     >
       <div
         class="flex"
@@ -355,7 +355,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
       >
         <div
           class="flex"
@@ -472,7 +472,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
         id="138661096"
       >
         <div
@@ -675,7 +675,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
         id="148827438"
       >
         <div
@@ -841,7 +841,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+      class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
     >
       <div
         class="flex"
@@ -958,7 +958,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
       </div>
     </div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
       id="138661096"
     >
       <div
@@ -1161,7 +1161,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
       </div>
     </div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
       id="148827438"
     >
       <div
@@ -1384,7 +1384,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
       >
         <div
           class="flex"
@@ -1507,7 +1507,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - gro
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+      class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
     >
       <div
         class="flex"
@@ -1687,7 +1687,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
       >
         <div
           class="flex"
@@ -1828,7 +1828,7 @@ exports[`renderer/components/AccountNotifications.tsx should render itself - no
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+      class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
     >
       <div
         class="flex"
@@ -2026,7 +2026,7 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
   "baseElement": <body>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
       >
         <div
           class="flex"
@@ -2145,7 +2145,7 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
     </div>
     <div>
       <div
-        class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+        class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
       >
         <div
           class="flex"
@@ -2268,7 +2268,7 @@ exports[`renderer/components/AccountNotifications.tsx should toggle account noti
   </body>,
   "container": <div>
     <div
-      class="group flex items-center justify-between px-3 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
+      class="group flex items-center justify-between pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white bg-gray-300 dark:bg-gray-darkest opacity-70"
     >
       <div
         class="flex"
diff --git a/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap b/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
index 50174ff78..9461f8530 100644
--- a/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
         id="138661096"
       >
         <div
@@ -212,7 +212,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   </body>,
   "container": <div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
       id="138661096"
     >
       <div
@@ -475,7 +475,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
         id="138661096"
       >
         <div
@@ -664,7 +664,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   </body>,
   "container": <div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
       id="138661096"
     >
       <div
@@ -910,7 +910,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
         id="138661096"
       >
         <div
@@ -1099,7 +1099,7 @@ exports[`renderer/components/NotificationRow.tsx should render itself & its chil
   </body>,
   "container": <div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white pl-3 pr-4 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
       id="138661096"
     >
       <div
diff --git a/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index d81842f86..4fbce3dd6 100644
--- a/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
+++ b/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -100,7 +100,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should render itself &
   </body>,
   "container": <div>
     <div
-      class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
         class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -251,7 +251,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -347,7 +347,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
     </div>
     <div>
       <div
-        class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -450,7 +450,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should toggle repositor
   </body>,
   "container": <div>
     <div
-      class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
         class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -610,7 +610,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
   "baseElement": <body>
     <div>
       <div
-        class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
       >
         <div
           class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
@@ -713,7 +713,7 @@ exports[`renderer/components/RepositoryNotifications.tsx should use default repo
   </body>,
   "container": <div>
     <div
-      class="group flex justify-between bg-gray-100 px-3 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
     >
       <div
         class="flex flex-1 gap-3 items-center truncate text-sm font-medium opacity-80"
