From 8701fb20d07773f4cc32e857b68575a813cf7e21 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Mon, 22 Feb 2021 02:30:44 -0500
Subject: [PATCH] fix(ui): Fix settings navigation horizontal scroll issues
 (#987)

---
 src/components/Settings/SettingsLayout.tsx    | 26 +++++++++----------
 .../Settings/SettingsNotifications.tsx        |  2 +-
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/Settings/SettingsLayout.tsx b/src/components/Settings/SettingsLayout.tsx
index 3a49889dc..ce5517746 100644
--- a/src/components/Settings/SettingsLayout.tsx
+++ b/src/components/Settings/SettingsLayout.tsx
@@ -122,20 +122,18 @@ const SettingsLayout: React.FC = ({ children }) => {
             ))}
           </select>
         </div>
-        <div className="hidden sm:block">
-          <div className="border-b border-gray-600">
-            <nav className="flex -mb-px">
-              {settingsRoutes.map((route, index) => (
-                <SettingsLink
-                  route={route.route}
-                  regex={route.regex}
-                  key={`standard-settings-link-${index}`}
-                >
-                  {route.text}
-                </SettingsLink>
-              ))}
-            </nav>
-          </div>
+        <div className="hidden overflow-x-scroll overflow-y-hidden border-b border-gray-600 sm:block hide-scrollbar">
+          <nav className="flex -mb-px">
+            {settingsRoutes.map((route, index) => (
+              <SettingsLink
+                route={route.route}
+                regex={route.regex}
+                key={`standard-settings-link-${index}`}
+              >
+                {route.text}
+              </SettingsLink>
+            ))}
+          </nav>
         </div>
       </div>
       <div className="mt-10 text-white">{children}</div>
diff --git a/src/components/Settings/SettingsNotifications.tsx b/src/components/Settings/SettingsNotifications.tsx
index a28de2f6d..0dd690ad8 100644
--- a/src/components/Settings/SettingsNotifications.tsx
+++ b/src/components/Settings/SettingsNotifications.tsx
@@ -311,7 +311,7 @@ const SettingsNotifications: React.FC = ({ children }) => {
             ))}
           </select>
         </div>
-        <div className="hidden sm:block">
+        <div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
           <nav className="flex space-x-4" aria-label="Tabs">
             {settingsRoutes.map((route, index) => (
               <SettingsLink