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/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}
           />