From 4180b5b673a281a1f546b2c4c66669eb7f03e154 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Thu, 9 Oct 2025 13:30:28 -0700
Subject: [PATCH] Reset scroll when navigating to provider (#1489)

<!-- CURSOR_SUMMARY -->
> [!NOTE]
> Resets main content scroll to top when switching providers by adding a
container id and scrolling it on provider change.
>
> - **Frontend**:
> - **Layout**: Add `id="layout-main-content-container"` to the main
content wrapper in `src/app/layout.tsx`.
> - **Provider Settings**: In `ProviderSettingsPage.tsx`, add an effect
to `scrollTo(0, 0)` on `#layout-main-content-container` when
`providerData` changes, resetting scroll on navigation.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
520758a3cf45f8438bc5089c3c427176eeefb306. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
---
 src/app/layout.tsx                               | 5 ++++-
 src/components/settings/ProviderSettingsPage.tsx | 9 +++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 98a54e6..2d2f372 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -44,7 +44,10 @@ export default function RootLayout({
           <SidebarProvider>
             <TitleBar />
             <AppSidebar />
-            <div className="flex h-screenish w-full overflow-x-hidden mt-12 mb-4 mr-4 border-t border-l border-border rounded-lg bg-background">
+            <div
+              id="layout-main-content-container"
+              className="flex h-screenish w-full overflow-x-hidden mt-12 mb-4 mr-4 border-t border-l border-border rounded-lg bg-background"
+            >
               {children}
             </div>
             <Toaster richColors />
diff --git a/src/components/settings/ProviderSettingsPage.tsx b/src/components/settings/ProviderSettingsPage.tsx
index 11479c3..c3f586c 100644
--- a/src/components/settings/ProviderSettingsPage.tsx
+++ b/src/components/settings/ProviderSettingsPage.tsx
@@ -43,6 +43,15 @@ export function ProviderSettingsPage({ provider }: ProviderSettingsPageProps) {
 
   // Find the specific provider data from the fetched list
   const providerData = allProviders?.find((p) => p.id === provider);
+  useEffect(() => {
+    const layoutMainContentContainer = document.getElementById(
+      "layout-main-content-container",
+    );
+    if (layoutMainContentContainer) {
+      layoutMainContentContainer.scrollTo(0, 0);
+    }
+  }, [providerData?.id]);
+
   const supportsCustomModels =
     providerData?.type === "custom" || providerData?.type === "cloud";