fix(ui): 实例卡片布局拥挤 —— 标题行只留状态徽标，可升级/镜像版本移到独立元数据行

加了「镜像 vX.Y.Z」角标后，标题行挤了名字+在线+可升级+镜像版本四样，导致名字被截成
「Ethan...」、徽标竖排换行成「可升\n级」「在\n线」。重构：
- 标题行只保留 名字 + 状态徽标；名字 flex:1 吃满宽度，仅真的过长才省略号（并加 title 悬浮全名）。
- 可升级 / 镜像版本 下沉到独立的 .inst-meta 行，可自然换行。
- .tag 全局加 white-space:nowrap，杜绝徽标字内换行；标题行状态徽标 flex:none 不被挤压。
- 卡片网格最小列宽 220→248px，给内容更多呼吸空间。
已用真实构建 CSS 渲染 mock 卡片截图验证：深浅色下名字完整显示、超长名优雅省略、徽标不再竖排。

panel/web/src/pages/Admin.tsx

@@ -1331,22 +1331,29 @@ function InstanceAdminCard({
   return (
     <div className={'inst-card' + (menuOpen ? ' open-menu' : '')}>
       <div className="inst-head">
-        <span className="inst-name">{inst.name}</span>
+        <span className="inst-name" title={inst.name}>
+          {inst.name}
+        </span>
         <span className={'tag ' + badge.cls}>{badge.text}</span>
-        {outdated && !acting && (
-          <span className="tag tag-warn" title="该实例的镜像落后于最新版，点「升级实例」可更新">
-            可升级
-          </span>
-        )}
-        {inst.imageVersion && (
-          <span
-            className="tag tag-muted"
-            title={/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? '该实例当前运行的镜像版本' : '本地自构建镜像（无发布版本号，显示镜像短 id）'}
-          >
-            镜像 {/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? `v${inst.imageVersion}` : inst.imageVersion.slice(0, 8)}
-          </span>
-        )}
       </div>
+      {/* 次要元数据独占一行（可换行），不再和名字挤在标题行导致名字被截断、徽标竖排换行 */}
+      {((outdated && !acting) || inst.imageVersion) && (
+        <div className="inst-meta">
+          {outdated && !acting && (
+            <span className="tag tag-warn" title="该实例的镜像落后于最新版，点「升级实例」可更新">
+              可升级
+            </span>
+          )}
+          {inst.imageVersion && (
+            <span
+              className="tag tag-muted"
+              title={/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? '该实例当前运行的镜像版本' : '本地自构建镜像（无发布版本号，显示镜像短 id）'}
+            >
+              镜像 {/^\d+\.\d+\.\d+$/.test(inst.imageVersion) ? `v${inst.imageVersion}` : inst.imageVersion.slice(0, 8)}
+            </span>
+          )}
+        </div>
+      )}
       <div className="inst-sub">
         {sub}
         {!acting && ` · 可访问 ${userCount} 人`}

panel/web/src/styles.css

@@ -476,6 +476,7 @@ button {
   margin-left: 8px;
   vertical-align: middle;
   font-weight: 600;
+  white-space: nowrap; /* 徽标整体不换行，杜绝「可升\n级」竖排 */
 }
 .tag-off {
   background: rgba(var(--danger-rgb) / 0.14);
@@ -952,7 +953,7 @@ button {
 /* ---------- 实例网格 ---------- */
 .inst-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
   gap: 14px;
   margin-bottom: 22px;
   /* 各卡片按自身内容高度，避免某张展开「管理」菜单时同行其它卡片被拉等高（显得也展开了） */
@@ -989,6 +990,8 @@ button {
   gap: 8px;
 }
 .inst-name {
+  flex: 1; /* 吃满剩余宽度，名字有充分空间，只在真的过长时才省略 */
+  min-width: 0; /* 允许在 flex 容器内收缩以触发省略号 */
   font-size: 16px;
   font-weight: 700;
   color: var(--text);
@@ -996,6 +999,23 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* 标题行的状态徽标：不参与收缩、整体不换行（此前会被挤成「在\n线」竖排） */
+.inst-head > .tag {
+  flex: none;
+  margin-left: 0;
+  white-space: nowrap;
+}
+/* 次要元数据行：可升级 / 镜像版本，独立成行、可自然换行 */
+.inst-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+.inst-meta .tag {
+  margin-left: 0;
+  white-space: nowrap;
+}
 .inst-sub {
   margin-top: 6px;
   font-size: 13px;