From f184bcbbd905fe6e9bd627f1862c324da519f43b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 19 Apr 2024 12:11:19 -0500
Subject: [PATCH] tab scrolling behavior

---
 web/src/pages/Settings.tsx | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index 49d3e7970..9d22e534d 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -86,39 +86,40 @@ export default function Settings() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (tabsRef.current) {
+      const element = tabsRef.current.querySelector(
+        `[data-nav-item="${pageToggle}"]`,
+      );
+      if (element instanceof HTMLElement) {
+        scrollIntoView(element, {
+          behavior: "smooth",
+          inline: "start",
+        });
+      }
+    }
+  }, [tabsRef, pageToggle]);
+
   return (
     <div className="size-full p-2 flex flex-col">
       <div className="w-full h-11 relative flex justify-between items-center">
         <ScrollArea className="w-full whitespace-nowrap">
-          <div ref={tabsRef} className="flex flex-row scroll-mx-20">
+          <div ref={tabsRef} className="flex flex-row">
             <ToggleGroup
-              className="*:px-3 *:py-4 *:rounded-md shrink-0"
+              className="*:px-3 *:py-4 *:rounded-md"
               type="single"
               size="sm"
               value={pageToggle}
               onValueChange={(value: SettingsType) => {
                 if (value) {
                   setPageToggle(value);
-
-                  if (tabsRef.current) {
-                    const element = tabsRef.current.querySelector(
-                      `[data-nav-item="${value}"]`,
-                    );
-                    if (element instanceof HTMLElement) {
-                      scrollIntoView(element, {
-                        behavior: "smooth",
-                        block: "center",
-                        inline: "center",
-                      });
-                    }
-                  }
                 }
               }}
             >
               {Object.values(settingsViews).map((item) => (
                 <ToggleGroupItem
                   key={item}
-                  className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                  className={`flex items-center justify-between gap-2 scroll-mx-10 ${page == "general" ? "last:mr-20" : ""} ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
                   value={item}
                   data-nav-item={item}
                   aria-label={`Select ${item}`}