From 2930ae400c50d33f48ce269985de0814835c56de Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 24 Oct 2024 09:12:19 -0400
Subject: [PATCH] Revert "feat: stable scrollbars (#1603)"

This reverts commit 4671b87e107c16d7d6d7b1ac69bb1dd6833b3fc5.
---
 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, 31 insertions(+), 32 deletions(-)
diff --git a/src/renderer/App.css b/src/renderer/App.css
index e22f3aec1..dbd60cc2d 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -3,7 +3,6 @@ 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 7a6d495a8..cc9f6bdce 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 pl-3 pr-4 py-1.5 text-sm font-semibold dark:text-white',
+            'group flex items-center justify-between px-3 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 60c5ec32c..3bd305433 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 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',
+        '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',
         (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 a85e60d62..f48d64377 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+        className="group flex justify-between bg-gray-100 px-3 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 62b203179..bbc1ca768 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 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"
+        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"
         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 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"
+        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"
         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 pl-3 pr-4 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 px-3 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 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"
+      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"
       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 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"
+      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"
       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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 pl-3 pr-4 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 px-3 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 9461f8530..50174ff78 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 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"
+        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"
         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 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"
+      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"
       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 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"
+        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"
         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 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"
+      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"
       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 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"
+        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"
         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 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"
+      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"
       id="138661096"
     >
       <div
diff --git a/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap b/src/renderer/components/__snapshots__/RepositoryNotifications.test.tsx.snap
index 4fbce3dd6..d81842f86 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+        class="group flex justify-between bg-gray-100 px-3 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 pl-3 pr-4 py-1.5 dark:bg-gray-darker dark:text-white"
+      class="group flex justify-between bg-gray-100 px-3 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"
