From b12f14c53810cff037b8f7df722960fd45f5ad2b Mon Sep 17 00:00:00 2001
From: Dhairyashil Shinde <93669429+dhairyashiil@users.noreply.github.com>
Date: Fri, 5 Dec 2025 00:46:18 +0530
Subject: [PATCH] feat: auto scroll sidebar to active team on navigation
 (#25555)

* feat: auto-scroll sidebar to active team on navigation

When navigating to team settings via "Edit team" from the teams list,
the sidebar now scrolls to show the selected team and expands its section.

- Extract team ID from URL path (/settings/teams/{id}/...)
- Use existing aria-controls attribute to find team element
- Scroll with smooth behavior centered in viewport

* revert formatting changes by prettier

---------

Co-authored-by: Pallav <90088723+Pallava-Joshi@users.noreply.github.com>
---
 .../SettingsLayoutAppDirClient.tsx            | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
index 3d2c06c300..59e16017d0 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
@@ -375,22 +375,26 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
   const [teamMenuState, setTeamMenuState] =
     useState<{ teamId: number | undefined; teamMenuOpen: boolean }[]>();
   const searchParams = useCompatSearchParams();
+  const pathname = usePathname();
   const searchParamsId = searchParams?.get("id");
+  const pathTeamId = pathname?.match(/\/settings\/teams\/(\d+)/)?.[1];
+  const activeTeamId = pathTeamId || searchParamsId;
+
   useEffect(() => {
     if (teams) {
       const teamStates = teams?.map((team) => ({
         teamId: team.id,
-        teamMenuOpen: String(team.id) === searchParamsId,
+        teamMenuOpen: String(team.id) === activeTeamId,
       }));
       setTeamMenuState(teamStates);
-      setTimeout(() => {
-        const tabMembers = Array.from(document.getElementsByTagName("a")).filter(
-          (bottom) => bottom.dataset.testid === "vertical-tab-Members"
-        )[1];
-        tabMembers?.scrollIntoView({ behavior: "smooth" });
-      }, 100);
+      if (activeTeamId) {
+        setTimeout(() => {
+          const teamTrigger = document.querySelector(`[aria-controls="team-content-${activeTeamId}"]`);
+          teamTrigger?.scrollIntoView({ behavior: "smooth", block: "center" });
+        }, 100);
+      }
     }
-  }, [searchParamsId, teams]);
+  }, [activeTeamId, teams]);
 
   return (
     <>