From adc3ba45cac0a0a1c19d37e6ef771f37b973511c Mon Sep 17 00:00:00 2001
From: Ayaan Zaidi <hi@obviy.us>
Date: Mon, 11 May 2026 20:07:45 +0530
Subject: [PATCH] ci(mantis): render proof media responsively

---
 scripts/mantis/publish-pr-evidence.mjs         | 18 ++++++++++++++----
 ...ild-telegram-desktop-proof-evidence.test.ts |  6 ++++--
 .../scripts/mantis-publish-pr-evidence.test.ts |  6 ++++--
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/scripts/mantis/publish-pr-evidence.mjs b/scripts/mantis/publish-pr-evidence.mjs
index 211074e67db..791462544b5 100644
--- a/scripts/mantis/publish-pr-evidence.mjs
+++ b/scripts/mantis/publish-pr-evidence.mjs
@@ -156,11 +156,21 @@ function renderPairTable({ pair, rawBase }) {
   if (!left || !right) {
     return "";
   }
-  const width = Math.min(Number(left.width ?? right.width ?? 420) || 420, 720);
   return [
-    `| ${left.label} | ${right.label} |`,
-    "| --- | --- |",
-    `| <img src="${artifactUrl(rawBase, left)}" width="${width}" alt="${left.alt ?? left.label}"> | <img src="${artifactUrl(rawBase, right)}" width="${width}" alt="${right.alt ?? right.label}"> |`,
+    '<table width="100%">',
+    "  <thead>",
+    "    <tr>",
+    `      <th width="50%">${left.label}</th>`,
+    `      <th width="50%">${right.label}</th>`,
+    "    </tr>",
+    "  </thead>",
+    "  <tbody>",
+    "    <tr>",
+    `      <td width="50%" align="center"><img src="${artifactUrl(rawBase, left)}" width="100%" alt="${left.alt ?? left.label}"></td>`,
+    `      <td width="50%" align="center"><img src="${artifactUrl(rawBase, right)}" width="100%" alt="${right.alt ?? right.label}"></td>`,
+    "    </tr>",
+    "  </tbody>",
+    "</table>",
     "",
   ].join("\n");
 }
diff --git a/test/scripts/mantis-build-telegram-desktop-proof-evidence.test.ts b/test/scripts/mantis-build-telegram-desktop-proof-evidence.test.ts
index 6b221c15ded..ff849f622be 100644
--- a/test/scripts/mantis-build-telegram-desktop-proof-evidence.test.ts
+++ b/test/scripts/mantis-build-telegram-desktop-proof-evidence.test.ts
@@ -94,9 +94,11 @@ describe("scripts/mantis/build-telegram-desktop-proof-evidence", () => {
         "https://github.com/openclaw/openclaw/tree/qa-artifacts/mantis/telegram-desktop/pr-1/run-1",
     });
 
-    expect(body).toContain("| Main | This PR |");
+    expect(body).toContain('<th width="50%">Main</th>');
+    expect(body).toContain('<th width="50%">This PR</th>');
     expect(body).toContain("baseline/telegram-desktop-proof.gif");
     expect(body).toContain("candidate/telegram-desktop-proof.gif");
-    expect(body).toContain('telegram-desktop-proof.gif" width="420"');
+    expect(body).toContain('telegram-desktop-proof.gif" width="100%"');
+    expect(body).not.toContain("| Main | This PR |");
   });
 });
diff --git a/test/scripts/mantis-publish-pr-evidence.test.ts b/test/scripts/mantis-publish-pr-evidence.test.ts
index 9c136736ebd..6641be947d2 100644
--- a/test/scripts/mantis-publish-pr-evidence.test.ts
+++ b/test/scripts/mantis-publish-pr-evidence.test.ts
@@ -92,9 +92,11 @@ describe("scripts/mantis/publish-pr-evidence", () => {
 
     expect(body).toContain("<!-- mantis-discord-status-reactions -->");
     expect(body).toContain("Summary: Mantis reran the scenario.");
-    expect(body).toContain("| Baseline queued-only | Candidate queued -> thinking -> done |");
+    expect(body).toContain('<table width="100%">');
+    expect(body).toContain('<th width="50%">Baseline queued-only</th>');
+    expect(body).toContain('<th width="50%">Candidate queued -> thinking -> done</th>');
     expect(body).toContain(
-      '<img src="https://raw.githubusercontent.com/openclaw/openclaw/qa-artifacts/mantis/discord/pr-1/run-1/baseline.png"',
+      '<td width="50%" align="center"><img src="https://raw.githubusercontent.com/openclaw/openclaw/qa-artifacts/mantis/discord/pr-1/run-1/baseline.png" width="100%"',
     );
     expect(body).toContain(
       "[Baseline change MP4](https://raw.githubusercontent.com/openclaw/openclaw/qa-artifacts/mantis/discord/pr-1/run-1/baseline-change.mp4)",