gavindiaz/PolyWeather
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make mobile account surfaces readable

Browse Source 
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
This commit is contained in:
2569718930@qq.com
2026-04-29 12:40:37 +08:00
parent 569f3eef97
commit 1ccc275a23
4 changed files with 27 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/account/AccountCenter.tsx
+8 -8
View File
@@ -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} />
frontend/components/dashboard/ScanTerminalMobile.module.css
+12
View File
@@ -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;