From a12ebcfda585aa49eb9682211b358e293814424b Mon Sep 17 00:00:00 2001
From: ashx-j <281260375+ashx-j@users.noreply.github.com>
Date: Thu, 15 Oct 2026 21:23:15 +0200
Subject: [PATCH 1/2] fix(web): keep the settings scope pickers pinned while
 scrolling

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/settings/SettingsScopeSentence.tsx  | 14 +++++++++-----
 .../web/src/components/settings/settingsLayout.tsx |  3 ++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsScopeSentence.tsx b/apps/web/src/components/settings/SettingsScopeSentence.tsx
index 04312fd031427..53e0f324039f7 100644
--- a/apps/web/src/components/settings/SettingsScopeSentence.tsx
+++ b/apps/web/src/components/settings/SettingsScopeSentence.tsx
@@ -45,10 +45,10 @@ interface SettingsScopeMenuProps {
 }
 
 /**
- * "Applying settings for <project> across <environment>" at the top of a settings
- * page. The two pickers are the targets a change is written to. A project is
- * the same project on every environment, so the environment alone decides
- * where a project override is written.
+ * "Applying settings for <project> across <environment>" pinned to the top of a
+ * settings page. The two pickers are the targets a change is written to. A
+ * project is the same project on every environment, so the environment alone
+ * decides where a project override is written.
  */
 export function SettingsScopeSentence() {
   const scope = useOptionalSettingsScope();
@@ -63,7 +63,11 @@ export function SettingsScopeSentence() {
     onChange: scope.selectScope,
   };
   return (
-    <p className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 px-3 text-base text-muted-foreground sm:px-4">
+    // Pinned to the top of the settings scroll area so the pickers stay in reach
+    // on long pages. The negative margins pull the opaque background over the
+    // page's top padding and down toward the first section without moving the
+    // layout, and the trailing gradient fades rows out as they slide under it.
+    <p className="sticky top-0 z-10 -mt-6 -mb-3 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 bg-background px-3 pt-6 pb-3 text-base text-muted-foreground after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-linear-to-b after:from-background after:to-transparent sm:px-4">
       {/* Each connective stays with its picker so a wrap never strands "on". */}
       <span className="flex min-w-0 items-center gap-1.5">
         <span className="shrink-0">Applying settings for</span>
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index 27c6a8fee282e..5ab2e86548f8b 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -571,7 +571,8 @@ export function SettingsPageContainer({
       onTargetHandled={clearTargetHash}
     >
       <div
-        className="topbar-scroll-fade scrollbar-gutter-both flex-1 overflow-y-auto"
+        // The scroll padding keeps focused rows clear of the pinned scope sentence.
+        className="topbar-scroll-fade scrollbar-gutter-both flex-1 scroll-pt-24 overflow-y-auto"
         data-settings-page-scroll
       >
         <WorkspacePageContainer width={width} className={cn("gap-8", className)}>

From 367e86f8a75844e85f69908b305ba539b8baac1d Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Mon, 19 Oct 2026 15:05:13 +0000
Subject: [PATCH 2/2] fix(web): keep settings scope pickers visible while
 scrolling

---
 .../src/components/settings/SettingsScopeSentence.tsx    | 9 ++-------
 apps/web/src/components/settings/settingsLayout.tsx      | 1 -
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsScopeSentence.tsx b/apps/web/src/components/settings/SettingsScopeSentence.tsx
index e6fbe8fb682e0..e4ff5770b780a 100644
--- a/apps/web/src/components/settings/SettingsScopeSentence.tsx
+++ b/apps/web/src/components/settings/SettingsScopeSentence.tsx
@@ -68,12 +68,7 @@ export function SettingsScopeSentence() {
     onChange: scope.selectScope,
   };
   return (
-    // Pinned to the top of the settings scroll area so the pickers stay in reach
-    // on long pages. The negative margins pull the opaque background over the
-    // page's top padding and down toward the first section without moving the
-    // layout, and the trailing gradient fades rows out as they slide under it.
-    <p className="sticky top-0 z-10 -mt-6 -mb-3 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 bg-background px-3 pt-6 pb-3 text-base text-muted-foreground after:pointer-events-none after:absolute after:inset-x-0 after:top-full after:h-4 after:bg-linear-to-b after:from-background after:to-transparent sm:px-4">
-      {/* Each connective stays with its picker so a wrap never strands "on". */}
+    <p className="sticky top-0 z-10 -mt-6 -mb-3 flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 bg-background px-3 pt-6 pb-3 text-base text-muted-foreground sm:px-4">
       <span className="flex min-w-0 items-center gap-1.5">
         <span className="shrink-0">Applying settings for</span>
         <ProjectScopeMenu {...props} />
@@ -138,7 +133,7 @@ function ScopeMenu({
     <Trigger
       aria-label={`${ariaLabel}: ${label}`}
       render={<InlineButton tone="picker" />}
-      className="min-w-0 max-w-72"
+      className="min-w-0 max-w-72 shrink"
     >
       {icon}
       <span className="min-w-0 truncate">{label}</span>
diff --git a/apps/web/src/components/settings/settingsLayout.tsx b/apps/web/src/components/settings/settingsLayout.tsx
index dea80839ccd21..2f24c0fc627e4 100644
--- a/apps/web/src/components/settings/settingsLayout.tsx
+++ b/apps/web/src/components/settings/settingsLayout.tsx
@@ -530,7 +530,6 @@ export function SettingsPageContainer({
       onTargetHandled={clearTargetHash}
     >
       <div
-        // The scroll padding keeps focused rows clear of the pinned scope sentence.
         className="topbar-scroll-fade scrollbar-gutter-both flex-1 scroll-pt-24 overflow-y-auto"
         data-settings-page-scroll
       >