From 3d2faae76361bcaa5d8674d041ca61f5d036da3f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 4 Feb 2026 07:52:18 +0000
Subject: [PATCH] Fix left navigation scroll behavior on settings pages

- Add sticky positioning to LeftNav component with CSS media query
- Use position: sticky with top: 0 on md+ screens (768px breakpoint)
- Add align-self: flex-start to ensure sticky works with flex containers
- Update settings layouts to use items-start alignment for proper flex behavior
- Use CSS media queries instead of responsive @apply variants to avoid PostCSS parsing errors
- Apply changes to organization settings, project settings, and users management pages

This replicates the Vercel-style behavior where the page header scrolls away
but the left navigation stays fixed at the top of the viewport.

Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
---
 web-admin/src/components/nav/LeftNav.svelte      | 14 +++++++++++---
 .../[organization]/-/settings/+layout.svelte     | 14 ++++++++++----
 .../routes/[organization]/-/users/+layout.svelte | 16 ++++++++++++----
 .../[project]/-/settings/+layout.svelte          | 16 ++++++++++++----
 4 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/web-admin/src/components/nav/LeftNav.svelte b/web-admin/src/components/nav/LeftNav.svelte
index 241c65e22fe..6c160fadf26 100644
--- a/web-admin/src/components/nav/LeftNav.svelte
+++ b/web-admin/src/components/nav/LeftNav.svelte
@@ -12,7 +12,7 @@
   }[];
 </script>
 
-<div class="nav-items" style:min-width={minWidth}>
+<div class="nav-sidebar" style:min-width={minWidth}>
   <!-- if hasPermission is not provided, it will be undefined -->
   {#each navItems as { label, route, hasPermission = true } (route)}
     {#if hasPermission}
@@ -26,7 +26,15 @@
 </div>
 
 <style lang="postcss">
-  .nav-items {
-    @apply flex flex-col gap-y-2;
+  .nav-sidebar {
+    @apply flex flex-col gap-y-2 shrink-0;
+  }
+
+  @media (min-width: 768px) {
+    .nav-sidebar {
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+    }
   }
 </style>
diff --git a/web-admin/src/routes/[organization]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
index df19f8eef8f..67953332b97 100644
--- a/web-admin/src/routes/[organization]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/settings/+layout.svelte
@@ -34,21 +34,27 @@
 </script>
 
 <ContentContainer title="Organization settings" maxWidth={1100}>
-  <div class="container flex-col md:flex-row">
+  <div class="settings-layout">
     <LeftNav
       {basePage}
       baseRoute="/[organization]/-/settings"
       {navItems}
       minWidth="180px"
     />
-    <div class="flex flex-col gap-y-6 w-full">
+    <div class="flex flex-col gap-y-6 w-full min-w-0">
       <slot />
     </div>
   </div>
 </ContentContainer>
 
 <style lang="postcss">
-  .container {
-    @apply flex pt-6 gap-6 max-w-full overflow-hidden;
+  .settings-layout {
+    @apply flex flex-col pt-6 gap-6 max-w-full;
+  }
+
+  @media (min-width: 768px) {
+    .settings-layout {
+      @apply flex-row items-start;
+    }
   }
 </style>
diff --git a/web-admin/src/routes/[organization]/-/users/+layout.svelte b/web-admin/src/routes/[organization]/-/users/+layout.svelte
index 0c33482d85d..3550e4009a2 100644
--- a/web-admin/src/routes/[organization]/-/users/+layout.svelte
+++ b/web-admin/src/routes/[organization]/-/users/+layout.svelte
@@ -38,14 +38,22 @@
 </script>
 
 <ContentContainer title="Manage users" maxWidth={1100}>
-  <div class="container flex-col md:flex-row">
+  <div class="settings-layout">
     <LeftNav {basePage} baseRoute="/[organization]/-/users" {navItems} />
-    <slot />
+    <div class="flex flex-col gap-y-6 w-full min-w-0">
+      <slot />
+    </div>
   </div>
 </ContentContainer>
 
 <style lang="postcss">
-  .container {
-    @apply flex pt-6 gap-6 max-w-full overflow-hidden;
+  .settings-layout {
+    @apply flex flex-col pt-6 gap-6 max-w-full;
+  }
+
+  @media (min-width: 768px) {
+    .settings-layout {
+      @apply flex-row items-start;
+    }
   }
 </style>
diff --git a/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte b/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
index c6a0aba8a10..1325d53f481 100644
--- a/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
+++ b/web-admin/src/routes/[organization]/[project]/-/settings/+layout.svelte
@@ -24,19 +24,27 @@
 </script>
 
 <ContentContainer title="Project settings" maxWidth={1100}>
-  <div class="container flex-col md:flex-row">
+  <div class="settings-layout">
     <LeftNav
       {basePage}
       baseRoute="/[organization]/[project]/-/settings"
       {navItems}
       minWidth="180px"
     />
-    <slot />
+    <div class="flex flex-col gap-y-6 w-full min-w-0">
+      <slot />
+    </div>
   </div>
 </ContentContainer>
 
 <style lang="postcss">
-  .container {
-    @apply flex pt-6 gap-6 max-w-full overflow-hidden;
+  .settings-layout {
+    @apply flex flex-col pt-6 gap-6 max-w-full;
+  }
+
+  @media (min-width: 768px) {
+    .settings-layout {
+      @apply flex-row items-start;
+    }
   }
 </style>