From f5a1cd81b2e515f980a088f5af10c50be1844a7d Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Mon, 20 Apr 2026 12:00:10 +0800
Subject: [PATCH] style(admin-web): truncate long client status tag with
 tooltip

Long desktop client status labels overflowed the media card; cap tag width with ellipsis and expose the full text via tooltip on hover.
---
 apps/admin-web/src/views/MediaView.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/apps/admin-web/src/views/MediaView.vue b/apps/admin-web/src/views/MediaView.vue
index c1c7e49..d4e19b8 100644
--- a/apps/admin-web/src/views/MediaView.vue
+++ b/apps/admin-web/src/views/MediaView.vue
@@ -403,7 +403,11 @@ async function refreshAll(): Promise<void> {
               </div>
               <div class="meta-row">
                 <span class="meta-label">客户端状态</span>
-                <a-tag :color="clientStatusColor(account)">{{ clientStatusText(account) }}</a-tag>
+                <a-tooltip :title="clientStatusText(account)" placement="topLeft">
+                  <a-tag :color="clientStatusColor(account)" class="client-status-tag">
+                    {{ clientStatusText(account) }}
+                  </a-tag>
+                </a-tooltip>
               </div>
               <div class="meta-row">
                 <span class="meta-label">最近心跳</span>
@@ -662,6 +666,14 @@ async function refreshAll(): Promise<void> {
   word-break: break-all;
 }
 
+.client-status-tag {
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
 .media-card__footer {
   padding-top: 4px;
 }