From 1ccc275a233a527a62754ac052e527964b51869d Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Wed, 29 Apr 2026 12:40:37 +0800
Subject: [PATCH] Make mobile account surfaces readable

Mobile review found that account payment rows could collapse labels vertically and several secondary links had small touch targets on narrow phones. The patch keeps the existing visual system but allows account rows to stack on mobile, improves tap height, and tightens the Scan Terminal narrow-screen container.

Constraint: Must keep the current desktop layout and avoid adding dependencies

Rejected: Rebuild the account page layout wholesale | too broad for a targeted mobile audit

Confidence: high

Scope-risk: narrow

Directive: Keep long account/payment identifiers breakable on narrow screens

Tested: iPhone SE and iPhone 12 Playwright mobile audits show no horizontal overflow on checked pages

Tested: npx tsc --noEmit --pretty false --project frontend/tsconfig.json

Tested: npm run build

Tested: npm run test:business

Not-tested: Authenticated /ops data state because local Supabase/admin gating redirects to the public shell
---
 frontend/app/entitlement-required/page.tsx       |  7 ++++++-
 frontend/app/subscription-help/page.tsx          |  2 +-
 frontend/components/account/AccountCenter.tsx    | 16 ++++++++--------
 .../dashboard/ScanTerminalMobile.module.css      | 12 ++++++++++++
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/app/entitlement-required/page.tsx b/frontend/app/entitlement-required/page.tsx
index f298bb47..082ba87e 100644
--- a/frontend/app/entitlement-required/page.tsx
+++ b/frontend/app/entitlement-required/page.tsx
@@ -36,7 +36,12 @@ export default async function EntitlementRequiredPage({ searchParams }: Props) {
           This dashboard is protected. If Supabase auth is enabled, please go to{" "}
           <a
             href={`/auth/login?next=${encodeURIComponent(nextPath)}`}
-            style={{ color: "#8fc5ff" }}
+            style={{
+              color: "#8fc5ff",
+              display: "inline-flex",
+              minHeight: 36,
+              alignItems: "center",
+            }}
           >
             /auth/login
           </a>{" "}
diff --git a/frontend/app/subscription-help/page.tsx b/frontend/app/subscription-help/page.tsx
index a9c77c56..73448f05 100644
--- a/frontend/app/subscription-help/page.tsx
+++ b/frontend/app/subscription-help/page.tsx
@@ -82,7 +82,7 @@ export default function SubscriptionHelpPage() {
               <Link
                 href={TELEGRAM_GROUP_URL}
                 target="_blank"
-                className="text-sm font-semibold text-blue-300 underline decoration-blue-500/50 underline-offset-4"
+                className="inline-flex min-h-9 items-center text-sm font-semibold text-blue-300 underline decoration-blue-500/50 underline-offset-4"
               >
                 加入社群即可赚取积分
               </Link>
diff --git a/frontend/components/account/AccountCenter.tsx b/frontend/components/account/AccountCenter.tsx
index 3a380913..cc806241 100644
--- a/frontend/components/account/AccountCenter.tsx
+++ b/frontend/components/account/AccountCenter.tsx
@@ -285,15 +285,15 @@ const InfoRow = ({
   value,
   isPrimary = false,
 }: InfoRowProps) => (
-  <div className="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all group">
-    <div className="flex items-center gap-3">
-      <div className="p-2 bg-slate-800 rounded-lg text-slate-400 group-hover:text-blue-400 transition-colors">
+  <div className="flex min-w-0 flex-col gap-3 p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all group sm:flex-row sm:items-center sm:justify-between">
+    <div className="flex min-w-0 items-center gap-3">
+      <div className="shrink-0 p-2 bg-slate-800 rounded-lg text-slate-400 group-hover:text-blue-400 transition-colors">
         {Icon && <Icon size={18} />}
       </div>
-      <span className="text-slate-400 text-sm font-medium">{label}</span>
+      <span className="min-w-0 text-slate-400 text-sm font-medium leading-5">{label}</span>
     </div>
     <span
-      className={`text-sm font-semibold font-mono ${isPrimary ? "text-blue-400" : "text-slate-200"}`}
+      className={`min-w-0 break-all text-left text-sm font-semibold font-mono sm:text-right ${isPrimary ? "text-blue-400" : "text-slate-200"}`}
     >
       {value}
     </span>
@@ -2772,7 +2772,7 @@ export function AccountCenter() {
                       href={TELEGRAM_BOT_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-cyan-400/30 bg-cyan-500/10 px-3 py-1.5 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-cyan-400/30 bg-cyan-500/10 px-3 py-2 text-xs font-semibold text-cyan-200 hover:bg-cyan-500/20"
                     >
                       {copy.telegramBotLink}
                       <ExternalLink size={12} />
@@ -2783,7 +2783,7 @@ export function AccountCenter() {
                       href={TELEGRAM_MARKET_CHANNEL_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-emerald-400/30 bg-emerald-500/10 px-3 py-1.5 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-emerald-400/30 bg-emerald-500/10 px-3 py-2 text-xs font-semibold text-emerald-200 hover:bg-emerald-500/20"
                     >
                       {copy.telegramMarketChannelLink}
                       <ExternalLink size={12} />
@@ -2794,7 +2794,7 @@ export function AccountCenter() {
                       href={TELEGRAM_GROUP_URL}
                       target="_blank"
                       rel="noreferrer"
-                      className="inline-flex items-center gap-1 rounded-lg border border-blue-400/30 bg-blue-500/10 px-3 py-1.5 text-xs font-semibold text-blue-200 hover:bg-blue-500/20"
+                      className="inline-flex min-h-9 items-center gap-1 rounded-lg border border-blue-400/30 bg-blue-500/10 px-3 py-2 text-xs font-semibold text-blue-200 hover:bg-blue-500/20"
                     >
                       {copy.telegramGroupLink}
                       <ExternalLink size={12} />
diff --git a/frontend/components/dashboard/ScanTerminalMobile.module.css b/frontend/components/dashboard/ScanTerminalMobile.module.css
index 1874b17f..ede3850f 100644
--- a/frontend/components/dashboard/ScanTerminalMobile.module.css
+++ b/frontend/components/dashboard/ScanTerminalMobile.module.css
@@ -491,14 +491,26 @@
 
 @media (max-width: 520px) {
   .root :global(.scan-terminal) {
+    box-sizing: border-box;
+    max-width: 100vw;
+    overflow-x: clip;
     padding: 6px;
   }
 
   .root :global(.scan-data-grid) {
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    max-width: 100%;
     padding: 10px;
     border-radius: 16px;
   }
 
+  .root :global(.scan-topbar-tabs) {
+    max-width: 100%;
+    gap: 8px;
+  }
+
   .root :global(.scan-upgrade-announcement) {
     margin: -2px 0 2px;
     padding: 12px;