gui: a failed check-in's reason wraps on its card rather than ending in … (#821, #808) — the Trae CN card's 签到失败，magpie 稍后重试 · <reason> was one line cut with an ellipsis, so the reason after · didn't show in the reporter's screenshot (only in the tooltip). A failed row now wraps: the reason flows onto the next lines and the Auto check-in / Check in now buttons go beside or under it. usage-quota-head.test.cjs asserts the reason isn't clipped (a long 9074 message), failing on the old CSS; it and usage-checkin.test.cjs pass on WebKit, en and zh; looked at in a screenshot. go vet, builds (darwin, GOOS=linux nogui, GOOS=windows) and go test -tags nogui ./internal/gui/ under a temp HOME pass.

internal/gui/assets/app.css

@@ -633,6 +633,11 @@ body.window .field.solo { grid-column: auto; }
 .wb-checkin { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
 .wb-checkin .ci-say { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
 .wb-checkin .ci-say > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* a failed check-in's reason wraps under it rather than ending in "…" (#821) */
+.wb-checkin[data-state="bad"] { flex-wrap: wrap; align-items: flex-start; }
+.wb-checkin[data-state="bad"] .ci-say { flex: 1 1 180px; align-items: flex-start; }
+.wb-checkin[data-state="bad"] .ci-say > span { white-space: normal; overflow-wrap: anywhere; }
+.wb-checkin[data-state="bad"] .ci-dot { margin-top: 4px; }
 .wb-checkin .ci-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
 .wb-checkin .ci-dot.ok { background: var(--green); }
 .wb-checkin .ci-dot.bad { background: var(--red); }

internal/gui/tests/usage-quota-head.test.cjs

@@ -17,7 +17,7 @@ const today = new Date(Date.now() + 8 * 3600e3).toISOString().slice(0, 10);
 const quotas = [
   { provider: "codex", name: "Codex", icon: "openai", plan: "Plus", windows: [{ name: "5 hours", used: 20 }] },
   { provider: "trae-cn", name: "Trae CN", plan: "Free", user: "hu", windows: [{ name: "Credits", used: 3 }],
-    checkins: true, checkinBy: "trae", checkin: { user: "hu", day: today, outcome: "failed", msg: "code 9074: 当前参与用户太多" } },
+    checkins: true, checkinBy: "trae", checkin: { user: "hu", day: today, outcome: "failed", msg: "code 9074: 当前参与用户太多，请稍后再试（今日签到人数较多，活动火爆，请耐心等待）" } },
 ];
 
 function serve(lang, gate) {
@@ -58,7 +58,10 @@ for (const engine of (process.env.BROWSER ? [process.env.BROWSER] : ["chromium",
       await head.waitFor();
       // the failed check-in's reason is in the row
       const say = (await page.locator(".wb-checkin .ci-say").innerText()).trim();
-      assert.equal(say, (lang === "en" ? "Check-in failed; magpie tries again later" : "签到失败，magpie 稍后重试") + " · code 9074: 当前参与用户太多");
+      assert.equal(say, (lang === "en" ? "Check-in failed; magpie tries again later" : "签到失败，magpie 稍后重试") + " · code 9074: 当前参与用户太多，请稍后再试（今日签到人数较多，活动火爆，请耐心等待）");
+      // and all of it is seen, not cut off with "…" (#821)
+      const clipped = await page.locator(".wb-checkin .ci-say > span").evaluate((s) => s.scrollWidth > s.clientWidth + 1 || s.getBoundingClientRect().right > s.closest(".subscription-card").getBoundingClientRect().right);
+      assert.equal(clipped, false, "the check-in's reason is cut off");
 
       // away and back, with the vendors and the log both slow to answer
       let free;