fix(web,ui): visual polish aligned to design reference (#457)

- Add responsive CSS classes for dashboard grid and metrics strip
  (3-col tablet, 2-col mobile, single-col stacking)
- Fix QuickActions layout from vertical to horizontal per design ref
- Replace non-existent var(--r-md) token with var(--r) in
  OrchestratorSessions and QuickActions
- Fix NavItem borderRadius to var(--r-sm) matching reference
- Fix ActivityFeed spacing (gap 12px, padding 10px per reference)
- Refactor MetricsStrip to CSS class-based responsive grid

Task: MS-P1-003

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/ui/src/components/MetricsStrip.tsx

@@ -16,7 +16,7 @@ export interface MetricsStripProps {
   className?: string;
 }
 
-function MetricCellItem({ cell, isFirst }: { cell: MetricCell; isFirst: boolean }): ReactElement {
+function MetricCellItem({ cell }: { cell: MetricCell }): ReactElement {
   const [hovered, setHovered] = useState(false);
 
   const trendColor =
@@ -28,6 +28,7 @@ function MetricCellItem({ cell, isFirst }: { cell: MetricCell; isFirst: boolean
 
   return (
     <div
+      className="metric-cell"
       onMouseEnter={(): void => {
         setHovered(true);
       }}
@@ -37,7 +38,6 @@ function MetricCellItem({ cell, isFirst }: { cell: MetricCell; isFirst: boolean
       style={{
         padding: "14px 16px",
         background: hovered ? "var(--surface-2)" : "var(--surface)",
-        borderLeft: isFirst ? "none" : "1px solid var(--border)",
         borderTop: `2px solid ${cell.color}`,
         transition: "background 0.15s ease",
       }}
@@ -82,17 +82,15 @@ function MetricCellItem({ cell, isFirst }: { cell: MetricCell; isFirst: boolean
 export function MetricsStrip({ cells, className = "" }: MetricsStripProps): ReactElement {
   return (
     <div
-      className={className}
-      style={{
-        display: "grid",
-        gridTemplateColumns: `repeat(${String(cells.length)}, 1fr)`,
-        borderRadius: "var(--r-lg)",
-        overflow: "hidden",
-        border: "1px solid var(--border)",
-      }}
+      className={`metrics-strip ${className}`.trim()}
+      style={
+        {
+          "--ms-cols": String(cells.length),
+        } as React.CSSProperties
+      }
     >
-      {cells.map((cell, index) => (
-        <MetricCellItem key={cell.label} cell={cell} isFirst={index === 0} />
+      {cells.map((cell) => (
+        <MetricCellItem key={cell.label} cell={cell} />
       ))}
     </div>
   );