From 7c6075a5b8170493d261170979ebb654ea3e43af Mon Sep 17 00:00:00 2001
From: LauraGPT <LauraGPT@users.noreply.github.com>
Date: Wed, 12 Aug 2026 18:50:20 +0000
Subject: [PATCH] fix(site): prevent mobile evidence overflow

---
 web-pages/product-site/assets/css/site.css    |  5 +++
 .../tests/browser/product-site.spec.ts        | 34 +++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/web-pages/product-site/assets/css/site.css b/web-pages/product-site/assets/css/site.css
index 3e47f8039..e6c5dbcd6 100644
--- a/web-pages/product-site/assets/css/site.css
+++ b/web-pages/product-site/assets/css/site.css
@@ -989,6 +989,11 @@ td a {
 .evidence-list a {
   color: var(--blue-dark);
   font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.evidence-list li {
+  min-width: 0;
 }
 
 .benchmark-intro > div {
diff --git a/web-pages/product-site/tests/browser/product-site.spec.ts b/web-pages/product-site/tests/browser/product-site.spec.ts
index 18326fa76..1aa269a8c 100644
--- a/web-pages/product-site/tests/browser/product-site.spec.ts
+++ b/web-pages/product-site/tests/browser/product-site.spec.ts
@@ -160,6 +160,40 @@ for (const viewport of [
   });
 }
 
+for (const viewport of [
+  { name: 'mobile', width: 390, height: 844 },
+  { name: 'desktop', width: 1440, height: 900 },
+]) {
+  test(`audio.cpp deployment is stable at ${viewport.name}`, async ({ page }, testInfo) => {
+    await page.setViewportSize(viewport);
+    await page.goto('/deploy/audio-cpp.html');
+
+    await expect(page.locator('h1')).toHaveText('audio.cpp 原生 Fun-ASR-Nano 与 SenseVoice');
+    await expect(page.getByText('pinned SenseVoice GGUF package', { exact: false })).toBeVisible();
+    await expect(page.locator('a[href="https://github.com/0xShug0/audio.cpp/pull/219"]')).toBeVisible();
+
+    const layout = await page.evaluate(() => ({
+      overflow: document.documentElement.scrollWidth - document.documentElement.clientWidth,
+      evidenceWidths: [...document.querySelectorAll<HTMLElement>('.evidence-list li')].map((node) => ({
+        client: node.clientWidth,
+        scroll: node.scrollWidth,
+      })),
+      commandWidths: [...document.querySelectorAll<HTMLElement>('.command-block')].map((node) => ({
+        parent: node.parentElement?.getBoundingClientRect().width ?? 0,
+        width: node.getBoundingClientRect().width,
+      })),
+    }));
+    expect(layout.overflow).toBeLessThanOrEqual(1);
+    expect(layout.evidenceWidths.every(({ client, scroll }) => scroll <= client + 1)).toBe(true);
+    expect(layout.commandWidths.every(({ parent, width }) => width <= parent + 1)).toBe(true);
+
+    await page.screenshot({
+      path: testInfo.outputPath(`audio-cpp-${viewport.name}.png`),
+      fullPage: true,
+    });
+  });
+}
+
 test('reduced motion disables smooth scrolling', async ({ page }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' });
   await page.goto('/en/');