From e6d5f0abfebdc24f25d08822b57a8eb7bc48e137 Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Tue, 18 May 2021 22:17:31 -0400
Subject: [PATCH] fix(ui): correct horizontal overflow behavior of settings
 tabs (#1667)

---
 src/components/Common/SettingsTabs/index.tsx | 54 ++++++++++----------
 1 file changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/components/Common/SettingsTabs/index.tsx b/src/components/Common/SettingsTabs/index.tsx
index 2e47b4183..5fcdca734 100644
--- a/src/components/Common/SettingsTabs/index.tsx
+++ b/src/components/Common/SettingsTabs/index.tsx
@@ -136,34 +136,32 @@ const SettingsTabs: React.FC<{
           </nav>
         </div>
       ) : (
-        <div className="hidden sm:block">
-          <div className="border-b border-gray-600">
-            <nav className="flex -mb-px">
-              {settingsRoutes
-                .filter(
-                  (route) =>
-                    !route.hidden &&
-                    (route.requiredPermission
-                      ? hasPermission(
-                          route.requiredPermission,
-                          currentUser?.permissions ?? 0,
-                          route.permissionType
-                        )
-                      : true)
-                )
-                .map((route, index) => (
-                  <SettingsLink
-                    tabType={tabType}
-                    currentPath={router.pathname}
-                    route={route.route}
-                    regex={route.regex}
-                    key={`standard-settings-link-${index}`}
-                  >
-                    {route.text}
-                  </SettingsLink>
-                ))}
-            </nav>
-          </div>
+        <div className="hidden overflow-x-scroll border-b border-gray-600 sm:block hide-scrollbar">
+          <nav className="flex">
+            {settingsRoutes
+              .filter(
+                (route) =>
+                  !route.hidden &&
+                  (route.requiredPermission
+                    ? hasPermission(
+                        route.requiredPermission,
+                        currentUser?.permissions ?? 0,
+                        route.permissionType
+                      )
+                    : true)
+              )
+              .map((route, index) => (
+                <SettingsLink
+                  tabType={tabType}
+                  currentPath={router.pathname}
+                  route={route.route}
+                  regex={route.regex}
+                  key={`standard-settings-link-${index}`}
+                >
+                  {route.text}
+                </SettingsLink>
+              ))}
+          </nav>
         </div>
       )}
     </>