fix: show run controls (pause/stop) on mobile instead of hiding them

The previous CSS hid all .btn-sm elements at ≤600px, which made run
control buttons (Pause, Resume, Stop) completely inaccessible on mobile.
Users could not pause or stop a running agent on their phone.

Now the controls render as compact icon-only buttons on mobile, the
stats bar (duplicated in RunOverview) is hidden to free space, and
the Stop button gets an SVG icon so it works in icon-only mode.

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

Author: 2 people

src/ralphify/ui/static/dashboard.css

@@ -2603,7 +2603,28 @@ body {
     display: none;
   }
 
-  .btn-sm {
+  .controls-stats {
+    display: none;
+  }
+
+  /* Icon-only run control buttons on mobile */
+  .controls-bar .btn-sm {
+    font-size: 0;
+    padding: 6px 8px;
+    gap: 0;
+    min-width: 32px;
+    min-height: 32px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .controls-bar .btn-sm svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Hide run-again button in history cards (card itself is clickable) */
+  .history-run-again-btn {
     display: none;
   }
 

src/ralphify/ui/static/dashboard.js

@@ -531,7 +531,12 @@ function RunControls({ run }) {
       </button>
     `}
     ${isActive && html`
-      <button class="btn btn-sm btn-danger" onClick=${() => stopRun(run.run_id)}>Stop</button>
+      <button class="btn btn-sm btn-danger" onClick=${() => stopRun(run.run_id)}>
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="4" y="4" width="16" height="16" rx="2"/>
+        </svg>
+        Stop
+      </button>
     `}
     ${isFinished && html`
       <button class="btn btn-sm btn-primary" onClick=${() => {