feat: stable scrollbars (#1603)

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/App.css

@@ -3,6 +3,7 @@ body,
 #root {
   height: 100%;
   -webkit-user-select: none;
+  scrollbar-gutter: stable;
 }
 
 html::-webkit-scrollbar,

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',

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,

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