@exxatdesignux/ui 0.2.15 → 0.2.17

package/template/components/site-header.tsx

@@ -5,11 +5,19 @@
  *
  *  ✓ SidebarTrigger wrapped in Tooltip — icon-only button (WCAG 4.1.2, 1.1.1)
  *  ✓ <header role="banner"> landmark for AT navigation (WCAG 1.3.6)
- *  ✓ No bottom border (per design spec)
+ *  ✓ Sticky at top — when stuck, the rounded breadcrumb sits on the app bg and a
+ *    bottom separator appears to anchor it; transparent at rest so the rounded
+ *    corners blend into the inset card.
  *  ✓ Uses Inter (font-sans) — Ivy Presto is reserved for PageHeader <h1> only
  */
 
-import Link from "next/link"
+import * as React from "react"
+import {
+  PageBreadcrumbBack,
+  PageBreadcrumbTrail,
+  type PageBreadcrumbBackProps,
+  type PageBreadcrumbTrailItem,
+} from "@/components/page-breadcrumb-trail"
 import { Separator } from "@/components/ui/separator"
 import { SidebarTrigger } from "@/components/ui/sidebar"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
@@ -20,26 +28,54 @@ import {
 } from "@/components/ui/tooltip"
 import { AskLeoToggle } from "@/components/ask-leo-sidebar"
 import { useModKeyLabel } from "@/hooks/use-mod-key-label"
+import { cn } from "@/lib/utils"
 
-export interface BreadcrumbItem {
-  label: string
-  href?: string
-}
+export type BreadcrumbItem = PageBreadcrumbTrailItem
+export type SiteHeaderBackLink = Pick<PageBreadcrumbBackProps, "label" | "href">
 
 export interface SiteHeaderProps {
-  /** Current page title (last breadcrumb segment) */
+  /** Current page title (last breadcrumb segment in trail mode). */
   title?: string
   /** Full breadcrumb trail — each item can be a link or plain text. Title is appended automatically as the last segment. */
   breadcrumbs?: BreadcrumbItem[]
+  /**
+   * Back-icon variant — parent link only (no `title` segment in the header).
+   * Prefer when the page `<h1>` carries the current title (e.g. New question composer).
+   */
+  back?: SiteHeaderBackLink
 }
 
-export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps) {
+export function SiteHeader({
+  title = "Dashboard",
+  breadcrumbs,
+  back,
+}: SiteHeaderProps) {
   const mod = useModKeyLabel()
+  const [isStuck, setIsStuck] = React.useState(false)
+
+  React.useEffect(() => {
+    const onScroll = () => setIsStuck(window.scrollY > 0)
+    onScroll()
+    window.addEventListener("scroll", onScroll, { passive: true })
+    return () => window.removeEventListener("scroll", onScroll)
+  }, [])
 
   return (
+    <div
+      className={cn(
+        // Sticky page chrome sits BELOW every Radix overlay (DropdownMenu /
+        // Popover / Select / Dialog / Sheet / Tooltip / Drawer all render at
+        // z-50). Previously `z-60` here caused the school/product switcher
+        // dropdown to open behind the breadcrumb. `z-30` keeps the header
+        // above page content (charts, tables, scrolled rows) but below
+        // floating overlays.
+        "sticky top-0 z-30 transition-colors",
+        isStuck ? "bg-sidebar border-b border-border" : "bg-transparent",
+      )}
+    >
     <header
       role="banner"
-      className="flex h-(--header-height) shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
+      className="flex h-(--header-height) shrink-0 items-center gap-2 bg-background rounded-t-xl transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)"
     >
       <div className="flex w-full items-center gap-1 ps-4 pe-2 lg:gap-2 lg:ps-6 lg:pe-2">
         <Tooltip>
@@ -60,34 +96,22 @@ export function SiteHeader({ title = "Dashboard", breadcrumbs }: SiteHeaderProps
           className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-auto"
         />
 
-        {/* Breadcrumb trail */}
-        <nav aria-label="Breadcrumb" className="flex items-center gap-1.5 min-w-0 overflow-hidden">
-          {breadcrumbs?.map((crumb, i) => (
-            <span key={i} className="flex items-center gap-1.5 shrink-0">
-              {crumb.href ? (
-                <Link
-                  href={crumb.href}
-                  className="font-sans text-sm text-muted-foreground hover:text-interactive-hover-foreground transition-colors tracking-normal"
-                >
-                  {crumb.label}
-                </Link>
-              ) : (
-                <span className="font-sans text-sm text-muted-foreground tracking-normal">
-                  {crumb.label}
-                </span>
-              )}
-              <i className="fa-light fa-chevron-right text-xs text-muted-foreground/50" aria-hidden="true" />
-            </span>
-          ))}
-          <span className="font-sans text-sm font-medium text-foreground tracking-normal truncate">
-            {title}
-          </span>
-        </nav>
+        {back ? (
+          <PageBreadcrumbBack {...back} className="min-w-0 flex-1" />
+        ) : (
+          <PageBreadcrumbTrail
+            variant="header"
+            items={breadcrumbs}
+            currentPage={title}
+            className="flex-1"
+          />
+        )}
 
         <div className="ml-auto shrink-0">
           <AskLeoToggle />
         </div>
       </div>
     </header>
+    </div>
   )
 }

package/template/components/sites-list-view.tsx

@@ -3,45 +3,40 @@
 import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { ListPageBoardCard } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 
 export function SitesListView({ rows }: { rows: SiteDirectoryRow[] }) {
-  if (rows.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No sites match your search.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {rows.map(site => (
-        <li key={site.id}>
-          <Link
-            href={site.url}
-            className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    <DataRowList<SiteDirectoryRow>
+      rows={rows}
+      getRowId={site => site.id}
+      emptyState="No sites match your search."
+      ariaLabel="Sites"
+      renderRow={site => (
+        <Link
+          href={site.url}
+          className="block rounded-xl text-inherit no-underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <ListPageBoardCard
+            layout="row"
+            interactive
+            rowContainerClassName="flex flex-row items-center gap-3"
+            leading={
+              <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
+                <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
+              </span>
+            }
+            rowEnd={
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            }
           >
-            <ListPageBoardCard
-              layout="row"
-              interactive
-              rowContainerClassName="flex flex-row items-center gap-3"
-              leading={
-                <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-md bg-brand/10 text-brand">
-                  <i className="fa-light fa-hospital text-sm" aria-hidden="true" />
-                </span>
-              }
-              rowEnd={
-                <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-              }
-            >
-              <div className="space-y-0.5">
-                <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
-                <p className="truncate text-xs text-muted-foreground">{site.id}</p>
-              </div>
-            </ListPageBoardCard>
-          </Link>
-        </li>
-      ))}
-    </ul>
+            <div className="space-y-0.5">
+              <p className="truncate text-sm font-semibold text-foreground">{site.name}</p>
+              <p className="truncate text-xs text-muted-foreground">{site.id}</p>
+            </div>
+          </ListPageBoardCard>
+        </Link>
+      )}
+    />
   )
 }

package/template/components/sites-table.tsx

@@ -10,6 +10,7 @@ import Link from "next/link"
 import type { SiteDirectoryRow } from "@/lib/mock/sites-directory"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import { useTableState } from "@/components/data-table/use-table-state"
+import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import type { ColumnDef } from "@/components/data-table/types"
 import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
@@ -193,6 +194,25 @@ export const SitesTable = React.forwardRef<
 
   const tableState = useTableState<SiteDirectoryRow>(sites, columns, { key: "name", dir: "asc" })
 
+  // Persist this hub's table lifecycle (sort / search / filters / column
+  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle`.
+  const lifecycleColumnKeys = React.useMemo(
+    () => new Set(columns.map(c => c.key)),
+    [columns],
+  )
+  useTableStateLifecycle({
+    namespace: "sites",
+    tabId: "main",
+    tableState,
+    columnKeys: lifecycleColumnKeys,
+    extras: { conditionalRules },
+    onLoadExtras: e => {
+      if (e && Array.isArray(e.conditionalRules)) {
+        setConditionalRules(e.conditionalRules as ConditionalRule[])
+      }
+    },
+  })
+
   React.useImperativeHandle(
     ref,
     () => ({
@@ -200,6 +220,10 @@ export const SitesTable = React.forwardRef<
         tableState.setSheetOpen(true)
       },
     }),
+    // `tableState` is freshly returned each render by useTableState; depending
+    // on it would re-create the imperative handle on every render. Only the
+    // React setter is needed (and is referentially stable).
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [tableState.setSheetOpen],
   )
 

package/template/components/table-properties/drawer.tsx

@@ -250,7 +250,7 @@ export function TablePropertiesDrawer({
         showOverlay={false}
         // w-[min(20rem,calc(100vw-1rem))]: cap to viewport width - 1rem at narrow/zoomed viewports
         // so the drawer never overflows horizontally. Use 100svh so height is correct on mobile.
-        className="w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
+        className="z-[80] w-[min(20rem,calc(100vw-1rem))] p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl overflow-hidden"
         style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100svh - 1rem)" }}
       >
 

package/template/components/team-client.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 /**
- * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as DataListClient).
+ * Team page — primary list template: ListPageTemplate + KeyMetrics + TeamTable (same composition as PlacementsClient).
  * Imports from `@/components/data-views` for shared list-page + view types.
  */
 

package/template/components/team-list-view.tsx

@@ -2,11 +2,13 @@
 
 /**
  * TeamListView — full-width rows for team roster (same data as DataTable / board).
+ * Shell from generic `DataRowList`; row body stays team-specific (avatar,
+ * name, role, email, status badge).
  */
 
-import * as React from "react"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
 import { ListPageBoardCard, ListPageBoardCardAvatar } from "@/components/data-views/list-page-board-card"
+import { DataRowList } from "@/components/data-views/data-row-list"
 import {
   TEAM_MEMBER_STATUS_BADGE_CLASS,
   TEAM_MEMBER_STATUS_ICON,
@@ -14,42 +16,6 @@ import {
 } from "@/lib/list-status-badges"
 import type { TeamMember } from "@/lib/mock/team"
 
-function TeamListRow({
-  member,
-  onRowActivate,
-}: {
-  member: TeamMember
-  onRowActivate?: (member: TeamMember) => void
-}) {
-  return (
-    <li>
-      <ListPageBoardCard
-        layout="row"
-        rowContainerClassName="flex flex-row items-center gap-3"
-        onClick={onRowActivate ? () => onRowActivate(member) : undefined}
-        leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
-        rowEnd={
-          <div className="flex shrink-0 items-center gap-2">
-            <ListHubStatusBadge
-              surface="board"
-              label={TEAM_MEMBER_STATUS_LABEL[member.status]}
-              tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
-              icon={TEAM_MEMBER_STATUS_ICON[member.status]}
-            />
-            <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
-          </div>
-        }
-      >
-        <div className="space-y-0.5">
-          <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
-          <p className="text-xs text-muted-foreground">{member.role}</p>
-          <p className="truncate text-xs text-muted-foreground">{member.email}</p>
-        </div>
-      </ListPageBoardCard>
-    </li>
-  )
-}
-
 export function TeamListView({
   members,
   onRowActivate,
@@ -57,19 +23,37 @@ export function TeamListView({
   members: TeamMember[]
   onRowActivate?: (member: TeamMember) => void
 }) {
-  if (members.length === 0) {
-    return (
-      <div className="px-4 py-16 text-center lg:px-6">
-        <p className="text-sm text-muted-foreground">No team members match your filters.</p>
-      </div>
-    )
-  }
-
   return (
-    <ul className="flex list-none flex-col gap-2 px-4 pb-8 pt-2 lg:px-6">
-      {members.map(m => (
-        <TeamListRow key={m.id} member={m} onRowActivate={onRowActivate} />
-      ))}
-    </ul>
+    <DataRowList<TeamMember>
+      rows={members}
+      getRowId={m => m.id}
+      emptyState="No team members match your filters."
+      ariaLabel="Team members"
+      renderRow={member => (
+        <ListPageBoardCard
+          layout="row"
+          rowContainerClassName="flex flex-row items-center gap-3"
+          onClick={onRowActivate ? () => onRowActivate(member) : undefined}
+          leading={<ListPageBoardCardAvatar initials={member.initials} className="size-9" />}
+          rowEnd={
+            <div className="flex shrink-0 items-center gap-2">
+              <ListHubStatusBadge
+                surface="board"
+                label={TEAM_MEMBER_STATUS_LABEL[member.status]}
+                tintClassName={TEAM_MEMBER_STATUS_BADGE_CLASS[member.status]}
+                icon={TEAM_MEMBER_STATUS_ICON[member.status]}
+              />
+              <i className="fa-light fa-chevron-right text-xs text-muted-foreground" aria-hidden="true" />
+            </div>
+          }
+        >
+          <div className="space-y-0.5">
+            <p className="truncate text-sm font-semibold text-foreground">{member.name}</p>
+            <p className="text-xs text-muted-foreground">{member.role}</p>
+            <p className="truncate text-xs text-muted-foreground">{member.email}</p>
+          </div>
+        </ListPageBoardCard>
+      )}
+    />
   )
 }

package/template/components/team-table.tsx

@@ -13,6 +13,7 @@ import {
   TEAM_MEMBER_STATUS_ICON,
   TEAM_MEMBER_STATUS_LABEL,
 } from "@/lib/list-status-badges"
+import { mailtoHref } from "@/lib/mailto"
 import type { TeamMember } from "@/lib/mock/team"
 import { DataTable, DataTableToolbar } from "@/components/data-table"
 import {
@@ -37,6 +38,7 @@ import type { DataListViewType } from "@/lib/data-list-view"
 import type { OpenTablePropertiesHandle } from "@/lib/list-page-table-properties"
 import type { ColumnDef } from "@/components/data-table/types"
 import { useTableState } from "@/components/data-table/use-table-state"
+import { useTableStateLifecycle } from "@/lib/table-state-lifecycle"
 import { TablePropertiesDrawerButton } from "@/components/table-properties"
 import type { ConditionalRule, FilterFieldDef, FilterOperator } from "@/components/table-properties/types"
 import { ListHubStatusBadge } from "@/components/list-hub-status-badge"
@@ -154,7 +156,7 @@ function TeamFinderDetail({
               <i className="fa-light fa-envelope text-[10px]" aria-hidden="true" /> Email
             </dt>
             <dd className="text-[13px]">
-              <a href={`mailto:${member.email}`} className="text-interactive-foreground hover:underline">{member.email}</a>
+              <a href={mailtoHref(member.email)} className="text-interactive-foreground hover:underline">{member.email}</a>
             </dd>
           </div>
           <div className="flex flex-col gap-0.5">
@@ -277,7 +279,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
         operators: ["contains", "not_contains"],
       },
       cell: row => (
-        <a href={`mailto:${row.email}`} className="text-sm text-primary hover:underline truncate block">
+        <a href={mailtoHref(row.email)} className="text-sm text-primary hover:underline truncate block">
           {row.email}
         </a>
       ),
@@ -341,7 +343,7 @@ function buildTeamColumns(members: TeamMember[]): ColumnDef<TeamMember>[] {
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
-              <DropdownMenuItem onClick={() => window.open(`mailto:${row.email}`)}>
+              <DropdownMenuItem onClick={() => window.open(mailtoHref(row.email))}>
                 <i className="fa-light fa-envelope" aria-hidden="true" />
                 Email
               </DropdownMenuItem>
@@ -400,6 +402,26 @@ export const TeamTable = React.forwardRef<
 
   const tableState = useTableState(members, columns, { key: "name", dir: "asc" })
 
+  // Persist this hub's table lifecycle (sort / search / filters / column
+  // visibility / etc.) to localStorage. See `lib/table-state-lifecycle` for
+  // the centralised hook; pass `extras` for any non-table state.
+  const lifecycleColumnKeys = React.useMemo(
+    () => new Set(columns.map(c => c.key)),
+    [columns],
+  )
+  useTableStateLifecycle({
+    namespace: "team",
+    tabId: "main",
+    tableState,
+    columnKeys: lifecycleColumnKeys,
+    extras: { conditionalRules },
+    onLoadExtras: e => {
+      if (e && Array.isArray(e.conditionalRules)) {
+        setConditionalRules(e.conditionalRules as ConditionalRule[])
+      }
+    },
+  })
+
   const dashboardKpi = React.useMemo(
     () => ({
       metrics: teamKpiMetrics(tableState.rows),
@@ -501,6 +523,10 @@ export const TeamTable = React.forwardRef<
     openPropertiesDrawer: () => {
       tableState.setSheetOpen(true)
     },
+  // `tableState` is freshly returned each render by useTableState; depending on
+  // it would re-create the imperative handle on every render. Only the React
+  // setter is needed (and is referentially stable).
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }), [tableState.setSheetOpen])
 
   const teamPanelFinderGroups = React.useMemo(

package/template/components/templates/dedicated-search-landing-template.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 
 import { ListPageViewFrame } from "@/components/data-views"
+import { DotPattern } from "@/components/ui/dot-pattern"
+import { cn } from "@/lib/utils"
 
 export interface DedicatedSearchLandingTemplateProps {
   /** Page title — string or rich node (e.g. styled heading). */
@@ -20,6 +22,67 @@ export interface DedicatedSearchLandingTemplateProps {
 const DEFAULT_GUTTER =
   "mx-auto flex min-h-[min(72vh,36rem)] w-full min-w-0 flex-col justify-center gap-0 px-6 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12 lg:px-16"
 
+/** Feather into page white / header so the hero never reads as a hard horizontal slab. */
+const HERO_BACKDROP_MASK =
+  "[mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)]"
+
+/**
+ * Soft blurred blobs using only Ask Leo surface tints (`--leo-surface-tint-a|b` in `globals.css`).
+ */
+function DedicatedSearchLandingBackdrop() {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 -z-10 select-none overflow-hidden",
+        HERO_BACKDROP_MASK,
+      )}
+    >
+      <div
+        className="absolute -left-[20%] -top-[30%] h-[min(54vmin,27rem)] w-[min(54vmin,27rem)] rounded-full blur-[76px]"
+        style={{
+          background: "radial-gradient(circle at 42% 36%, var(--leo-surface-tint-b) 0%, transparent 68%)",
+        }}
+      />
+      <div
+        className="absolute -right-[12%] top-[2%] h-[min(46vmin,23rem)] w-[min(46vmin,23rem)] rounded-full blur-[68px]"
+        style={{
+          background: "radial-gradient(circle at 48% 48%, var(--leo-surface-tint-a) 0%, transparent 66%)",
+        }}
+      />
+      <div
+        className="absolute bottom-[-16%] left-[14%] h-[min(50vmin,25rem)] w-[min(50vmin,25rem)] rounded-full blur-[84px]"
+        style={{
+          background: "radial-gradient(circle at 44% 40%, var(--leo-surface-tint-b) 0%, transparent 70%)",
+        }}
+      />
+      <div
+        className="absolute bottom-[4%] right-[6%] h-[min(40vmin,20rem)] w-[min(40vmin,20rem)] rounded-full blur-[60px]"
+        style={{
+          background: "radial-gradient(circle at 52% 44%, var(--leo-surface-tint-a) 0%, transparent 72%)",
+        }}
+      />
+      <div
+        className="absolute left-[36%] top-[32%] h-[min(38vmin,19rem)] w-[min(38vmin,19rem)] -translate-x-1/2 rounded-full blur-[74px]"
+        style={{
+          background: "radial-gradient(circle at 50% 50%, var(--leo-surface-tint-b) 0%, transparent 68%)",
+        }}
+      />
+
+      {/* Static dot field — same primitive as `AiThinkingOverlay` (no motion here). */}
+      <DotPattern
+        width={15}
+        height={15}
+        cr={0.65}
+        className={cn(
+          "absolute inset-0 opacity-[0.34] mix-blend-multiply dark:opacity-[0.22] dark:mix-blend-soft-light",
+          "fill-[color-mix(in_oklch,var(--brand-color)_14%,var(--background))]",
+        )}
+      />
+    </div>
+  )
+}
+
 /**
  * Centered dedicated-search landing — empty `?q=` shell (hero title + composer + optional trailing).
  */
@@ -32,27 +95,30 @@ export function DedicatedSearchLandingTemplate({
   gutterClassName = DEFAULT_GUTTER,
 }: DedicatedSearchLandingTemplateProps) {
   return (
-    <ListPageViewFrame
-      maxWidthClassName={maxWidthClassName}
-      className={frameClassName}
-      gutterClassName={gutterClassName}
-    >
-      <header className="min-w-0">
-        {typeof title === "string" ? (
-          <h1
-            className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
-            style={{ fontFamily: "var(--font-heading)" }}
-          >
-            {title}
-          </h1>
-        ) : (
-          title
-        )}
-      </header>
+    <div className="relative isolate min-w-0 w-full overflow-hidden">
+      <DedicatedSearchLandingBackdrop />
+      <ListPageViewFrame
+        maxWidthClassName={maxWidthClassName}
+        className={cn("relative z-10", frameClassName)}
+        gutterClassName={gutterClassName}
+      >
+        <header className="min-w-0">
+          {typeof title === "string" ? (
+            <h1
+              className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
+              style={{ fontFamily: "var(--font-heading)" }}
+            >
+              {title}
+            </h1>
+          ) : (
+            title
+          )}
+        </header>
 
-      <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
+        <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
 
-      {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
-    </ListPageViewFrame>
+        {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
+      </ListPageViewFrame>
+    </div>
   )
 }

package/template/components/templates/list-page.tsx

@@ -320,9 +320,7 @@ export function ListPageTemplate({
             const count    = getTabCount?.(tab.filterId)
             const tabInner = (
               <>
-                {isActive ? (
-                  <i className={`fa-light ${tab.icon} text-xs`} aria-hidden="true" />
-                ) : null}
+                <i className={cn("fa-light shrink-0 text-xs", tab.icon)} aria-hidden="true" />
                 {tab.label}
                 {count !== undefined && (
                   <span

package/template/components/templates/nested-secondary-panel-shell.tsx

@@ -14,8 +14,8 @@ export interface NestedSecondaryPanelShellProps {
 }
 
 /**
- * Shared chrome for a nested hub rail — full width vs icon rail, aligned with primary sidebar tokens.
- * Domain panels render their header + nav inside `children`.
+ * Shared chrome for a nested hub rail — full width vs icon rail.
+ * Fill uses `--secondary-panel-bg` (soft brand wash on `--background`).
  */
 export function NestedSecondaryPanelShell({
   open,
@@ -34,15 +34,20 @@ export function NestedSecondaryPanelShell({
         "transition-[width,margin,opacity] duration-200 ease-linear",
         open
           ? cn(
-              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative md:sticky md:top-2",
+              // Match the primary sidebar: fill the full viewport height
+              // (minus our 0.5rem top + 0.5rem bottom margin from `m-2` →
+              // 1rem on desktop where the panel is `md:sticky md:top-2`;
+              // 2rem on mobile where the panel scrolls inline and we leave
+              // a little more breathing room). No upper cap so tall screens
+              // get a fully-extended rail.
+              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
               compact
-                ? "w-12 min-w-12 max-w-12 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]"
-                : "w-64 min-w-64 max-w-64 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]",
+                ? "w-12 min-w-12 max-w-12 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]"
+                : "w-64 min-w-64 max-w-64 h-[calc(100svh-2rem)] md:h-[calc(100svh-1rem)]",
             )
           : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
         className,
       )}
-      style={open ? { backgroundColor: "var(--secondary-panel-bg, #FAFBFF)" } : undefined}
     >
       <div
         className={cn(