From cf028769d297aa31ed0784f0f475a1478f3e626d Mon Sep 17 00:00:00 2001
From: AAA <35992542+TNTcraftHIM@users.noreply.github.com>
Date: Sat, 29 Aug 2026 04:16:35 +0800
Subject: [PATCH] feat(ui): polish compact UI details (#323)

---
 src/client/components/living/Header.tsx  |  2 +-
 src/client/components/living/Metrics.tsx | 16 +++++++++-------
 src/client/styles.css                    |  6 ++++++
 tests/metric-cells.test.ts               | 21 +++++++++++++++++++++
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/src/client/components/living/Header.tsx b/src/client/components/living/Header.tsx
index 43b76ae..cf2a6b4 100644
--- a/src/client/components/living/Header.tsx
+++ b/src/client/components/living/Header.tsx
@@ -65,7 +65,7 @@ export function HeaderControls() {
       <span className="lr-lang" role="group" aria-label={t("mode.language")}>
         {option("zh", "中", "mode.zh")}
         {option("en", "EN", "mode.en")}
-        {option("vis", vis ? "✦" : "视", "mode.vis")}
+        {option("vis", "✦", "mode.vis")}
       </span>
       {vis ? (
         <ComicTooltip kind="hint-theme" place="below" align="end">
diff --git a/src/client/components/living/Metrics.tsx b/src/client/components/living/Metrics.tsx
index 50755ab..3c4c3e4 100644
--- a/src/client/components/living/Metrics.tsx
+++ b/src/client/components/living/Metrics.tsx
@@ -82,21 +82,23 @@ function secondaryMetrics(
       });
     }
     const captureParts: string[] = [];
-    let captureDiffersFromDelivery = false;
     if (metrics.captureWidth !== null && metrics.captureHeight !== null) {
       const captureResolution = `${metrics.captureWidth}x${metrics.captureHeight}`;
-      captureParts.push(captureResolution);
-      captureDiffersFromDelivery ||= captureResolution !== metrics.resolution;
+      if (captureResolution !== metrics.resolution) {
+        captureParts.push(captureResolution);
+      }
     }
     if (metrics.captureFramesPerSecond !== null) {
       const captureFps = readable(metrics.captureFramesPerSecond, 1);
-      captureParts.push(`${captureFps} fps`);
-      captureDiffersFromDelivery ||=
+      if (
         metrics.framesPerSecond === null ||
         !Number.isFinite(metrics.framesPerSecond) ||
-        captureFps !== metrics.framesPerSecond.toFixed(1);
+        captureFps !== metrics.framesPerSecond.toFixed(1)
+      ) {
+        captureParts.push(`${captureFps} fps`);
+      }
     }
-    if (captureParts.length > 0 && captureDiffersFromDelivery) {
+    if (captureParts.length > 0) {
       values.push({ icon: "expand", label: "stats.capture", value: captureParts.join(" · ") });
     }
     addNumber("stats.inputFps", "wave", metrics.mediaSourceFramesPerSecond, "fps", 1);
diff --git a/src/client/styles.css b/src/client/styles.css
index fc6aef4..747b1d2 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -445,8 +445,10 @@ ul { margin: 0; padding: 0; list-style: none; }
 .lr-row.is-sub .lr-divider { background: #c3d4cb; }
 .lr-field-cap { opacity: .55; font-size: 12px; font-weight: 600; }
 .lr-invite-url {
+  width: 100%;
   min-width: 0;
   max-width: 340px;
+  flex: 1 1 240px;
   overflow: hidden;
   padding: 7px 10px;
   border: 1.5px dashed var(--wall-2);
@@ -912,6 +914,10 @@ html[data-theme="dark"] .lr-switch::after { background: var(--ink); }
   .lr-leds-label { display: none; }
   .lr-header-controls .lr-btn .lr-cap { display: none; }
 }
+@media (max-width: 360px) {
+  .lr-tiles .lr-tile { padding-inline: 4px; }
+  .lr-tile small { font-size: 10px; letter-spacing: 0; }
+}
 
 /* ---------- comic tooltip ---------- */
 
diff --git a/tests/metric-cells.test.ts b/tests/metric-cells.test.ts
index 61bddba..16ea134 100644
--- a/tests/metric-cells.test.ts
+++ b/tests/metric-cells.test.ts
@@ -234,4 +234,25 @@ describe("MetricCells progressive disclosure", () => {
 
     expect(html).not.toContain("捕获设置");
   });
+
+  it("shows only the capture dimension that differs from delivery", () => {
+    const html = renderToStaticMarkup(
+      createElement(MetricCells, {
+        metrics: {
+          ...metrics,
+          resolution: "1280x720",
+          framesPerSecond: 60,
+          captureWidth: 1920,
+          captureHeight: 1080,
+          captureFramesPerSecond: 60,
+        },
+        direction: "send",
+        expanded: true,
+        onToggle: () => undefined,
+      }),
+    );
+
+    expect(html).toContain("1920x1080");
+    expect(html).not.toContain("1920x1080 · 60.0 fps");
+  });
 });