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