fix(ds): .plan-banner 窄宽度按钮换行 + 名字保底宽度(修 Renew/Upgrade 覆盖用户名)

pbn-row flex-wrap + pbn-info min-width:96px:窄容器下按钮换到下一行、
名字不再被挤成 me…;宽屏按钮仍靠右。容器驱动,桌面/移动/手机框一并生效。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013nMthbVEmQquxBRKb9Fj8u
This commit is contained in:
wangjia
2026-07-12 16:44:52 +08:00
parent 7700c43216
commit 53426bd4c1
+4 -2
View File
@@ -660,9 +660,11 @@
/* PLAN BANNER · 账户页套餐横幅(免费=surface / .is-pro=clay 渐变;对齐 _PlanBanner */
.plan-banner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-5); }
.plan-banner .pbn-row { display: flex; align-items: center; gap: var(--space-3); }
.plan-banner .pbn-info { flex: 1 1 auto; min-width: 0; }
.plan-banner .pbn-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; row-gap: var(--space-4); }
.plan-banner .pbn-info { flex: 1 1 auto; min-width: 96px; } /* 给名字保底宽度,不被按钮挤成 me… */
.plan-banner .pbn-row > .btn { flex-shrink: 0; }
.plan-banner .pbn-row > .btn:last-child { margin-left: auto; } /* 宽屏靠右;窄屏换行到下方(整行) */
@media (max-width: 380px){ .plan-banner .pbn-row > .btn:last-child { flex: 1 1 100%; margin-left: 0; } }
.plan-banner .pbn-badge { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: var(--accent-subtle); color: var(--accent); }
.plan-banner .pbn-badge > svg { width: 24px; height: 24px; }
.plan-banner .pbn-name { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--fg1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }