refactor(alerts/ui): slim alerts-page.module.css to layout-only DS tokens

Drop the feed-row classes (.row, .rowUnread, .body, .meta, .time, .message, .actions, .empty) — these are replaced by DS DataTable + EmptyState in follow-up tasks. Keep layout helpers for page shell, toolbar, filter bar, bulk-action bar, title cell, and DataTable expanded content. All colors / spacing use DS tokens. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-21 10:03:20 +02:00
parent b16ea8b185
commit c87c77c1cf
1 changed files with 93 additions and 17 deletions
--- a/ui/src/pages/Alerts/alerts-page.module.css
+++ b/ui/src/pages/Alerts/alerts-page.module.css
@@ -1,18 +1,94 @@
-.page { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
-.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
-.row {
-  display: grid;
-  grid-template-columns: 72px 1fr auto;
-  gap: 12px;
-  padding: 12px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--bg);
+.page {
+  padding: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+}
+
+.filterBar {
+  display: flex;
+  gap: var(--space-sm);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.bulkBar {
+  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);
+}
+
+.titleCell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.titleCell a {
+  color: var(--text-primary);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.titleCell a:hover {
+  text-decoration: underline;
+}
+
+.titleCellUnread a {
+  font-weight: 600;
+}
+
+.titlePreview {
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 48ch;
+}
+
+.expanded {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.expandedGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: var(--space-sm);
+}
+
+.expandedField {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.expandedLabel {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+
+.expandedValue {
+  font-size: 13px;
+  color: var(--text-primary);
+  margin: 0;
+  word-break: break-word;
 }
-.rowUnread { border-left: 3px solid var(--accent); }
-.body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
-.meta { display: flex; gap: 8px; font-size: 12px; color: var(--muted); }
-.time { font-variant-numeric: tabular-nums; }
-.message { margin: 0; font-size: 13px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.actions { display: flex; align-items: center; }
-.empty { padding: 48px; text-align: center; color: var(--muted); }