diff --git a/client/src/assets/main.css b/client/src/assets/main.css
index 5ff038b48..619479e05 100644
--- a/client/src/assets/main.css
+++ b/client/src/assets/main.css
@@ -253,22 +253,28 @@
   mask-size: 150px 150px;
 }
 
-.glow-wrapper {
-  background-image: var(--glow-image);
-  background-position: top;
-  background-repeat: no-repeat;
-  background-size: auto calc(var(--glow-band) * var(--glow-reach));
+/* A zero-height flow item at the top of the main inset. Being in flow, it spans the inset's content box,
+   which ends at the sidebar's edge, so the glow centres on the main column and follows the sidebar as it
+   resizes or collapses. Its layers sit at a negative z-index, under the shell's content like the
+   background patterns. The texture is a layer of its own so its tiles keep their size; the reach only
+   moves the fade. */
+.shell-glow {
+  position: relative;
+  flex: none;
+  height: 0;
 }
 
-/* The texture sits on its own layer so its tiles keep their size; the reach only moves the fade. Negative
-   z-index keeps it under the shell's content and the glow, like the background patterns. */
-.glow-wrapper::after {
+.shell-glow::before,
+.shell-glow::after {
   content: '';
   position: absolute;
   inset: 0 0 auto;
   z-index: -1;
   height: calc(var(--glow-band) * var(--glow-reach));
   pointer-events: none;
+}
+
+.shell-glow::before {
   background-image: var(--glow-texture);
   background-position: top center;
   background-size: var(--glow-texture-size);
@@ -276,12 +282,13 @@
   mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 0%, transparent 100%);
 }
 
-html[data-glow='off'] .glow-wrapper {
-  background-image: none;
+.shell-glow::after {
+  background-image: var(--glow-image);
+  background-repeat: no-repeat;
 }
 
-html[data-glow='off'] .glow-wrapper::after {
-  content: none;
+html[data-glow='off'] .shell-glow {
+  display: none;
 }
 
 @layer base {
diff --git a/client/src/assets/theme/tokens.css b/client/src/assets/theme/tokens.css
index bed8aa13f..30ea70a1a 100644
--- a/client/src/assets/theme/tokens.css
+++ b/client/src/assets/theme/tokens.css
@@ -150,7 +150,7 @@
   --shell-backdrop: blur(24px) saturate(150%);
   --shell-shadow: var(--elevation-lg);
 
-  /* Accent glow behind the top of the shell (.glow-wrapper). --glow-band is the style's own reach and
+  /* Accent glow behind the top of the main column (.shell-glow). --glow-band is the style's own reach and
      --glow-reach the user's multiplier on it, written on <html>. A texture keeps its tile size at any reach;
      only the fade that reveals it follows the band. */
   --glow-reach: 0.8;
diff --git a/client/src/components/AppLayout.vue b/client/src/components/AppLayout.vue
index 64cda1c65..2289baac7 100644
--- a/client/src/components/AppLayout.vue
+++ b/client/src/components/AppLayout.vue
@@ -50,9 +50,10 @@ const viewKey = computed(() => {
 </script>
 
 <template>
-  <SidebarProvider class="app-shell glow-wrapper min-h-svh" :class="themeStore.appliedBackgroundClass">
+  <SidebarProvider class="app-shell min-h-svh" :class="themeStore.appliedBackgroundClass">
     <AppSidebar />
     <SidebarInset class="app-shell-inset flex flex-col h-svh overflow-hidden relative bg-transparent pb-(--shell-gap)">
+      <div aria-hidden="true" class="shell-glow" />
       <!-- 1. Global App Header: Fixed at the top, independent of views -->
       <AppHeader />