diff --git a/frontend/src/components/NavSidebar.tsx b/frontend/src/components/NavSidebar.tsx
index 7aa4d704..13f33840 100644
--- a/frontend/src/components/NavSidebar.tsx
+++ b/frontend/src/components/NavSidebar.tsx
@@ -27,7 +27,7 @@ import { PopoverSurface } from "./ui/AnchoredPopover";
 import { useAnchoredPopover } from "./ui/anchoredPopoverHooks";
 import { Pressable } from "./ui/Pressable";
 import { SURFACE } from "./ui/surfaces";
-import { NavRail, NavRailDivider, NavRailItem, RAIL_ROW } from "./ui/NavRail";
+import { NavRail, NavRailDivider, NavRailItem, NavRailList, RAIL_ROW } from "./ui/NavRail";
 import { usePrefs } from "./prefsContext";
 
 // Primary app navigation: a thin icon-only left rail. The modules used to hide under the avatar
@@ -189,15 +189,11 @@ export default function NavSidebar({
     // against its right edge.
     <div className="relative shrink-0 w-15">
       <NavRail label={t("nav.primary")} className="absolute top-0 bottom-0 left-0 z-rail my-3">
-        <div
-          ref={listFade.ref}
-          className="flex-1 min-h-0 overflow-y-auto no-scrollbar flex flex-col gap-0.5"
-          style={listFade.style}
-        >
+        <NavRailList ref={listFade.ref} style={listFade.style}>
           {userItems.map(renderItem)}
           {systemItems.length > 0 && <NavRailDivider />}
           {systemItems.map(renderItem)}
-        </div>
+        </NavRailList>
 
         <div className="mt-2 pt-2 border-t border-border flex flex-col gap-1">
           <div className="flex flex-col items-center justify-center gap-2 pb-2 mb-1 border-b border-border">
diff --git a/frontend/src/components/ui/NavRail.tsx b/frontend/src/components/ui/NavRail.tsx
index 5dec7b63..ec2a4092 100644
--- a/frontend/src/components/ui/NavRail.tsx
+++ b/frontend/src/components/ui/NavRail.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode, Ref } from "react";
 import type { LucideIcon } from "lucide-react";
 import { Pressable } from "./Pressable";
 import { SURFACE } from "./surfaces";
@@ -33,6 +33,30 @@ export function NavRail({
   );
 }
 
+/** The rail's scrolling list of pages. An overflow container clips on BOTH axes, so the list spans the
+ *  rail's padding (`-mx-1 px-1`): the active row's edge bar, which sits in that padding, stays inside
+ *  the list's box and is not cut off. */
+export function NavRailList({
+  ref,
+  style,
+  children,
+}: {
+  ref?: Ref<HTMLDivElement>;
+  /** The scroll fade's mask. */
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      ref={ref}
+      style={style}
+      className="-mx-1 flex min-h-0 flex-1 flex-col gap-0.5 overflow-y-auto px-1 no-scrollbar"
+    >
+      {children}
+    </div>
+  );
+}
+
 /** A short, thick centred rule: the "new section" cue on an icon rail (the system modules). */
 export function NavRailDivider() {
   return <div className="mx-auto my-1.5 w-7 shrink-0 border-t-2 border-border" />;