fix(design): the rail's active edge bar was clipped by the scrolling list (E28 S3d3)

An overflow-y container clips on both axes; the bar sits in the rail's padding, outside the row.
NavRailList spans that padding (-mx-1 px-1) so the bar stays inside the list's box.

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" />;