feat(scenarios): add detail page, comfortable DescriptionList layout, and environment card refactor

- Add ScenarioDetailPage with DescriptionList, steps table, run/delete actions
- Add /scenarios/:id route
- Add i18n keys for scenario detail fields, steps columns, and 404 error
- Add 'comfortable' and 'inline' layout variants to DescriptionList (with compact as default stacked)
- Apply layout="comfortable" to session, environment, and scenario detail pages
- Apply layout="compact" to EnvironmentsPage card DescriptionList
- Refactor EnvironmentsPage card to use ContextMenu (view/edit/delete) with icons
- Add ScenariosPage clickable rows, Play icon (primary) and Trash2 icon (danger) action buttons
- Add Page.module.css sectionHeading and stepsSection utility classes
- Fix Notification.tsx and Table.tsx formatting (prettier)

client/src/ui/DescriptionList/DescriptionList.module.css

@@ -45,3 +45,35 @@
   max-width: 100%;
 }
 
+/* ── Layout modifiers ───────────────────────────────────────── */
+
+.inline .row {
+  flex-direction: row;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.inline .term {
+  min-width: 120px;
+}
+
+.comfortable {
+  gap: 0;
+}
+
+.comfortable .row {
+  padding: var(--space-4) 0;
+}
+
+.comfortable .row:first-child {
+  padding-top: 0;
+}
+
+.comfortable .term {
+  margin-bottom: var(--space-1);
+}
+
+.comfortable .detail {
+  font-size: var(--font-size-md);
+}
+

client/src/ui/DescriptionList/DescriptionList.tsx

@@ -15,14 +15,19 @@ export interface DescriptionListItem {
 
 export interface DescriptionListProps {
   items: DescriptionListItem[];
-  /** 'compact' stacks term above detail; 'inline' places them side by side (default) */
-  layout?: 'inline' | 'compact';
+  /** 'compact' stacks term above detail; 'inline' places them side by side; 'comfortable' adds generous spacing with dividers (default) */
+  layout?: 'inline' | 'compact' | 'comfortable';
   /** Truncate detail values with ellipsis; full value shown in a tooltip on hover */
   truncate?: boolean;
   className?: string;
 }
 
-export function DescriptionList({ items, layout = 'inline', truncate, className }: DescriptionListProps) {
+export function DescriptionList({
+  items,
+  layout = 'inline',
+  truncate,
+  className,
+}: DescriptionListProps) {
   return (
     <dl className={[styles.list, styles[layout], className].filter(Boolean).join(' ')}>
       {items.map((item, i) => (

client/src/ui/Notification/Notification.tsx

@@ -11,19 +11,14 @@ export interface NotificationProps {
 }
 
 const ICONS: Record<NotificationVariant, React.ReactNode> = {
-  info:    <Info size={16} />,
+  info: <Info size={16} />,
   success: <CheckCircle2 size={16} />,
-  error:   <AlertCircle size={16} />,
+  error: <AlertCircle size={16} />,
   warning: <AlertTriangle size={16} />,
-  note:    <StickyNote size={16} />,
+  note: <StickyNote size={16} />,
 };
 
-export function Notification({
-  variant = 'info',
-  title,
-  children,
-  className,
-}: NotificationProps) {
+export function Notification({ variant = 'info', title, children, className }: NotificationProps) {
   return (
     <div className={[styles.notification, styles[variant], className].filter(Boolean).join(' ')}>
       <span className={styles.icon}>{ICONS[variant]}</span>

client/src/ui/Table/Table.tsx

@@ -82,7 +82,9 @@ export function Table<T>({
             visibleData.map((row) => (
               <tr
                 key={rowKey(row)}
-                className={[styles.tr, onRowClick ? styles.clickable : ''].filter(Boolean).join(' ')}
+                className={[styles.tr, onRowClick ? styles.clickable : '']
+                  .filter(Boolean)
+                  .join(' ')}
                 onClick={onRowClick ? () => onRowClick(row) : undefined}
               >
                 {columns.map((col) => (