fix(alerts/ui): page header, scroll, title preview, bell badge polish

Visual regressions surfaced during browser smoke:

1. Page headers — `SectionHeader` renders as 12px uppercase gray (a
   section divider, not a page title). Replace with proper h2 title
   + inline subtitle (`N firing · N total` etc.) and right-aligned
   actions, styled from `alerts-page.module.css`.

2. Undefined `--space-*` tokens — the project (and `@cameleer/design-system`)
   has never shipped `--space-sm|md|lg|xl`, even though many modules
   (SensitiveKeysPage, alerts CSS, …) reference them. The fallback
   to `initial` silently collapsed gaps/paddings to 0. Define the
   scale in `ui/src/index.css` so every consumer picks it up.

3. List scrolling — DataTable was using default pagination, but with
   no flex sizing the whole page scrolled. Add `fillHeight` and raise
   `pageSize`/list `limit` to 200 so the table gets sticky header +
   internal scroll + pinned pagination footer (Gmail-style). True
   cursor-based infinite scroll needs a backend change (filed as
   follow-up — `/alerts` only accepts `limit` today).

4. Title column clipping — `.titlePreview` used `white-space: nowrap`
   + fixed `max-width`, truncating message mid-UUID. Switch to a
   2-line `-webkit-line-clamp` so full context is visible.

5. Notification bell badge invisible — `NotificationBell.module.css`
   referenced undefined tokens (`--fg`, `--hover-bg`, `--bg`,
   `--muted`). Map to real DS tokens (`--text-primary`, `--bg-hover`,
   `#fff`, `--text-muted`). The admin user currently sees no badge
   because the backend `/alerts/unread-count` returns 0 (read
   receipts) — that's data, not UI.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

ui/src/components/NotificationBell.module.css

@@ -5,11 +5,11 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 8px;
-  color: var(--fg);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
   text-decoration: none;
 }
-.bell:hover { background: var(--hover-bg); }
+.bell:hover { background: var(--bg-hover); }
 .badge {
   position: absolute;
   top: 2px;
@@ -18,7 +18,7 @@
   height: 16px;
   padding: 0 4px;
   border-radius: 8px;
-  color: var(--bg);
+  color: #fff;
   font-size: 10px;
   font-weight: 600;
   line-height: 16px;
@@ -26,4 +26,4 @@
 }
 .badgeCritical { background: var(--error); }
 .badgeWarning  { background: var(--amber); }
-.badgeInfo     { background: var(--muted); }
+.badgeInfo     { background: var(--text-muted); }

ui/src/index.css

@@ -64,6 +64,14 @@
   --text-muted: #766A5E;
   /* White text on colored badge backgrounds (not in DS yet) */
   --text-inverse: #fff;
+
+  /* Spacing scale — DS doesn't ship these, but many app modules reference them.
+     Keep local here until the DS grows a real spacing system. */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
 }
 
 [data-theme="dark"] {

ui/src/pages/Alerts/AllAlertsPage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 import { Bell } from 'lucide-react';
 import {
-  SectionHeader, DataTable, EmptyState, SegmentedTabs,
+  DataTable, EmptyState, SegmentedTabs,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
@@ -71,17 +71,19 @@ export default function AllAlertsPage() {
 
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader>All alerts</SectionHeader>
-      </div>
-
-      <div className={css.filterBar}>
-        <SegmentedTabs
-          tabs={Object.entries(STATE_FILTERS).map(([value, f]) => ({ value, label: f.label }))}
-          active={filterKey}
-          onChange={setFilterKey}
-        />
-      </div>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>All alerts</h2>
+          <span className={css.pageSubtitle}>{rows.length} shown</span>
+        </div>
+        <div className={css.pageActions}>
+          <SegmentedTabs
+            tabs={Object.entries(STATE_FILTERS).map(([value, f]) => ({ value, label: f.label }))}
+            active={filterKey}
+            onChange={setFilterKey}
+          />
+        </div>
+      </header>
 
       {rows.length === 0 ? (
         <EmptyState
@@ -90,12 +92,14 @@ export default function AllAlertsPage() {
           description="Try switching to a different state or widening your criteria."
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertDto & { id: string }>
             columns={columns as Column<AlertDto & { id: string }>[]}
             data={rows as Array<AlertDto & { id: string }>}
             sortable
             flush
+            fillHeight
+            pageSize={200}
             rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
             expandedContent={renderAlertExpanded}
           />

ui/src/pages/Alerts/HistoryPage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Link } from 'react-router';
 import { History } from 'lucide-react';
 import {
-  SectionHeader, DataTable, EmptyState, DateRangePicker,
+  DataTable, EmptyState, DateRangePicker,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
@@ -86,13 +86,15 @@ export default function HistoryPage() {
 
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader>History</SectionHeader>
-      </div>
-
-      <div className={css.filterBar}>
-        <DateRangePicker value={dateRange} onChange={setDateRange} />
-      </div>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>History</h2>
+          <span className={css.pageSubtitle}>{filtered.length} resolved</span>
+        </div>
+        <div className={css.pageActions}>
+          <DateRangePicker value={dateRange} onChange={setDateRange} />
+        </div>
+      </header>
 
       {filtered.length === 0 ? (
         <EmptyState
@@ -101,12 +103,14 @@ export default function HistoryPage() {
           description="Nothing in the selected date range. Try widening it."
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertDto & { id: string }>
             columns={columns as Column<AlertDto & { id: string }>[]}
             data={filtered as Array<AlertDto & { id: string }>}
             sortable
             flush
+            fillHeight
+            pageSize={200}
             rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
             expandedContent={renderAlertExpanded}
           />

ui/src/pages/Alerts/InboxPage.tsx

@@ -2,7 +2,7 @@ import { useMemo, useState } from 'react';
 import { Link } from 'react-router';
 import { Inbox } from 'lucide-react';
 import {
-  Button, SectionHeader, DataTable, EmptyState, useToast,
+  Button, DataTable, EmptyState, useToast,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
 import { PageLoader } from '../../components/PageLoader';
@@ -19,7 +19,7 @@ import css from './alerts-page.module.css';
 import tableStyles from '../../styles/table-section.module.css';
 
 export default function InboxPage() {
-  const { data, isLoading, error } = useAlerts({ state: ['FIRING', 'ACKNOWLEDGED'], limit: 100 });
+  const { data, isLoading, error } = useAlerts({ state: ['FIRING', 'ACKNOWLEDGED'], limit: 200 });
   const bulkRead = useBulkReadAlerts();
   const markRead = useMarkAlertRead();
   const ack = useAckAlert();
@@ -123,19 +123,19 @@ export default function InboxPage() {
 
   const selectedIds = Array.from(selected);
 
+  const subtitle =
+    selectedIds.length > 0
+      ? `${selectedIds.length} selected`
+      : `${unreadIds.length} firing · ${rows.length} total`;
+
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader>Inbox</SectionHeader>
-      </div>
-
-      <div className={css.bulkBar}>
-        <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
-          {selectedIds.length > 0
-            ? `${selectedIds.length} selected`
-            : `${unreadIds.length} unread`}
-        </span>
-        <div style={{ marginLeft: 'auto', display: 'flex', gap: 'var(--space-sm)' }}>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>Inbox</h2>
+          <span className={css.pageSubtitle}>{subtitle}</span>
+        </div>
+        <div className={css.pageActions}>
           <Button
             variant="secondary"
             size="sm"
@@ -153,7 +153,7 @@ export default function InboxPage() {
             Mark all read
           </Button>
         </div>
-      </div>
+      </header>
 
       {rows.length === 0 ? (
         <EmptyState
@@ -162,12 +162,14 @@ export default function InboxPage() {
           description="No open alerts for you in this environment."
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertDto & { id: string }>
             columns={columns as Column<AlertDto & { id: string }>[]}
             data={rows as Array<AlertDto & { id: string }>}
             sortable
             flush
+            fillHeight
+            pageSize={200}
             rowAccent={(row) => row.severity ? severityToAccent(row.severity) : undefined}
             expandedContent={renderAlertExpanded}
           />

ui/src/pages/Alerts/RulesListPage.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { Link, useNavigate } from 'react-router';
 import { FilePlus } from 'lucide-react';
 import {
-  Button, SectionHeader, Toggle, useToast, Badge, DataTable,
+  Button, Toggle, useToast, Badge, DataTable,
   EmptyState, Dropdown, ConfirmDialog,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -111,17 +111,17 @@ export default function RulesListPage() {
 
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader
-          action={
-            <Link to="/alerts/rules/new">
-              <Button variant="primary">New rule</Button>
-            </Link>
-          }
-        >
-          Alert rules
-        </SectionHeader>
-      </div>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>Alert rules</h2>
+          <span className={css.pageSubtitle}>{rows.length} total</span>
+        </div>
+        <div className={css.pageActions}>
+          <Link to="/alerts/rules/new">
+            <Button variant="primary">New rule</Button>
+          </Link>
+        </div>
+      </header>
 
       {rows.length === 0 ? (
         <EmptyState
@@ -135,11 +135,12 @@ export default function RulesListPage() {
           }
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertRuleResponse & { id: string }>
             columns={columns}
             data={rows as (AlertRuleResponse & { id: string })[]}
             flush
+            fillHeight
           />
         </div>
       )}

ui/src/pages/Alerts/SilencesPage.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { BellOff } from 'lucide-react';
 import {
-  Button, FormField, Input, SectionHeader, useToast, DataTable,
+  Button, FormField, Input, useToast, DataTable,
   EmptyState, ConfirmDialog, MonoText,
 } from '@cameleer/design-system';
 import type { Column } from '@cameleer/design-system';
@@ -92,9 +92,12 @@ export default function SilencesPage() {
 
   return (
     <div className={css.page}>
-      <div className={css.toolbar}>
-        <SectionHeader>Alert silences</SectionHeader>
-      </div>
+      <header className={css.pageHeader}>
+        <div className={css.pageTitleGroup}>
+          <h2 className={css.pageTitle}>Alert silences</h2>
+          <span className={css.pageSubtitle}>{rows.length} active</span>
+        </div>
+      </header>
 
       <section className={sectionStyles.section}>
         <div
@@ -139,11 +142,12 @@ export default function SilencesPage() {
           description="Nothing is currently silenced in this environment."
         />
       ) : (
-        <div className={tableStyles.tableSection}>
+        <div className={`${tableStyles.tableSection} ${css.tableWrap}`}>
           <DataTable<AlertSilenceResponse & { id: string }>
             columns={columns}
             data={rows.map((s) => ({ ...s, id: s.id ?? '' }))}
             flush
+            fillHeight
           />
         </div>
       )}

ui/src/pages/Alerts/alerts-page.module.css

@@ -3,16 +3,48 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-md);
+  height: 100%;
+  min-height: 0;
 }
 
-.toolbar {
+.pageHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: var(--space-sm);
+  gap: var(--space-md);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--border-subtle);
   flex-wrap: wrap;
 }
 
+.pageTitleGroup {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.pageTitle {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+  letter-spacing: -0.01em;
+}
+
+.pageSubtitle {
+  font-size: 13px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.pageActions {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .filterBar {
   display: flex;
   gap: var(--space-sm);
@@ -20,14 +52,11 @@
   flex-wrap: wrap;
 }
 
-.bulkBar {
+.tableWrap {
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
-  gap: var(--space-sm);
-  align-items: center;
-  padding: var(--space-sm) var(--space-md);
-  background: var(--bg-hover);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  flex-direction: column;
 }
 
 .titleCell {
@@ -54,10 +83,12 @@
 .titlePreview {
   font-size: 12px;
   color: var(--text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 48ch;
+  word-break: break-word;
+  line-height: 1.4;
 }
 
 .expanded {