From 2d395860b355451229aff572be39c12b06432793 Mon Sep 17 00:00:00 2001
From: xmanrui <841206367@qq.com>
Date: Wed, 26 Aug 2026 17:27:48 +0800
Subject: [PATCH] fix(ui): keep bot status in card top-right

---
 lib/client.js                             |  6 ------
 plugin-src/client/styles.js               |  6 ------
 test/channels/telegram/client-ui.test.mjs |  3 ++-
 test/client-ui.test.mjs                   | 10 ++++++++++
 4 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/lib/client.js b/lib/client.js
index ab7a1ae..7e9a75e 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -10577,8 +10577,6 @@ var CSS11 = String.raw`
 .dim-panel .ddt-qrFrame, .dim-panel .ddt-countdown { width: min(270px, 100%); }
 @container (max-width: 680px) {
   .dim-panel .bxf-headingTools, .dim-panel .dxw-tools, .dim-panel .ddt-tools { gap: 6px; }
-  .dim-panel .dim-botCardTop { flex-direction: column; align-items: stretch; }
-  .dim-panel .dim-botHealthGroup { justify-items: start; }
   .dim-panel .dim-bindActions { gap: 6px; }
   .dim-panel .bxf-headingTools .dim-scanButton, .dim-panel .dxw-tools .dim-scanButton, .dim-panel .ddt-tools .dim-scanButton, .dim-panel .dim-credentialButton { gap: 5px; padding-inline: 8px; font-size: 12px; }
   .dim-panel .dim-actionIcon { width: 13px; height: 13px; flex-basis: 13px; }
@@ -10602,10 +10600,6 @@ var CSS11 = String.raw`
   .dim-rail { max-height: none; overflow: visible; padding-right: 1px; }
   .dim-channel { min-height: 48px; }
 }
-@media (max-width: 720px) {
-  .dim-panel .dim-botCardTop { flex-direction: column; align-items: stretch; }
-  .dim-panel .dim-botHealthGroup { justify-items: start; }
-}
 @media (max-width: 560px) {
   .dim-title { flex-direction: column; gap: 10px; }
   .dim-title p { white-space: normal; }
diff --git a/plugin-src/client/styles.js b/plugin-src/client/styles.js
index 3923f9f..0bfe117 100644
--- a/plugin-src/client/styles.js
+++ b/plugin-src/client/styles.js
@@ -245,8 +245,6 @@ const CSS = String.raw`
 .dim-panel .ddt-qrFrame, .dim-panel .ddt-countdown { width: min(270px, 100%); }
 @container (max-width: 680px) {
   .dim-panel .bxf-headingTools, .dim-panel .dxw-tools, .dim-panel .ddt-tools { gap: 6px; }
-  .dim-panel .dim-botCardTop { flex-direction: column; align-items: stretch; }
-  .dim-panel .dim-botHealthGroup { justify-items: start; }
   .dim-panel .dim-bindActions { gap: 6px; }
   .dim-panel .bxf-headingTools .dim-scanButton, .dim-panel .dxw-tools .dim-scanButton, .dim-panel .ddt-tools .dim-scanButton, .dim-panel .dim-credentialButton { gap: 5px; padding-inline: 8px; font-size: 12px; }
   .dim-panel .dim-actionIcon { width: 13px; height: 13px; flex-basis: 13px; }
@@ -270,10 +268,6 @@ const CSS = String.raw`
   .dim-rail { max-height: none; overflow: visible; padding-right: 1px; }
   .dim-channel { min-height: 48px; }
 }
-@media (max-width: 720px) {
-  .dim-panel .dim-botCardTop { flex-direction: column; align-items: stretch; }
-  .dim-panel .dim-botHealthGroup { justify-items: start; }
-}
 @media (max-width: 560px) {
   .dim-title { flex-direction: column; gap: 10px; }
   .dim-title p { white-space: normal; }
diff --git a/test/channels/telegram/client-ui.test.mjs b/test/channels/telegram/client-ui.test.mjs
index e10214a..c05bce4 100644
--- a/test/channels/telegram/client-ui.test.mjs
+++ b/test/channels/telegram/client-ui.test.mjs
@@ -166,7 +166,8 @@ test('Telegram cards shrink to a narrow English panel without horizontal scrolli
 
   assert.match(sharedStyles, /\.dim-panel \.dim-botList \{[^}]*grid-template-columns: minmax\(0, 1fr\);/);
   assert.match(sharedStyles, /\.dim-panel \.dim-botCard \{[^}]*min-width: 0;[^}]*width: 100%;[^}]*max-width: 100%;[^}]*overflow: hidden;/);
-  assert.match(sharedStyles, /@container \(max-width: 680px\)[^]*\.dim-panel \.dim-botCardTop \{ flex-direction: column; align-items: stretch; \}/);
+  assert.match(sharedStyles, /\.dim-panel \.dim-botIdentity \{[^}]*min-width: 0;[^}]*flex: 1 1 0;/);
+  assert.doesNotMatch(sharedStyles, /\.dim-panel \.dim-botCardTop \{ flex-direction: column;/);
   assert.match(sharedStyles, /\.dim-panel \.dim-workspacePath \{[^}]*overflow: hidden;[^}]*overflow-wrap: anywhere;[^}]*white-space: normal;/);
   assert.doesNotMatch(sharedStyles, /\.dim-panel \.dim-workspacePath \{[^}]*overflow-x: auto;/);
   assert.match(telegramStyles, /\.dtg-access \{[^}]*min-width: 0;[^}]*width: 100%;[^}]*max-width: 100%;/);
diff --git a/test/client-ui.test.mjs b/test/client-ui.test.mjs
index edff4fa..f030470 100644
--- a/test/client-ui.test.mjs
+++ b/test/client-ui.test.mjs
@@ -601,6 +601,16 @@ test('all channel bot cards use the DingTalk card treatment', async () => {
   assert.doesNotMatch(styles, /\.dim-panel \.dim-botMetrics|\.dim-panel \.dim-botMetric/);
 });
 
+test('bot card status stays in the top-right corner at every responsive breakpoint', async () => {
+  const styles = await readFile(STYLES_URL, 'utf8');
+
+  assert.match(styles, /\.dim-panel \.dim-botCardTop \{[^}]*display: flex;[^}]*align-items: flex-start;[^}]*justify-content: space-between;/);
+  assert.match(styles, /\.dim-panel \.dim-botIdentity \{[^}]*min-width: 0;[^}]*flex: 1 1 0;/);
+  assert.match(styles, /\.dim-panel \.dim-botHealthGroup \{[^}]*flex: none;[^}]*justify-items: end;/);
+  assert.doesNotMatch(styles, /\.dim-panel \.dim-botCardTop \{ flex-direction: column;/);
+  assert.doesNotMatch(styles, /\.dim-panel \.dim-botHealthGroup \{ justify-items: start;/);
+});
+
 test('bot cards wrap full workspace paths without horizontal scrolling', async () => {
   const styles = await readFile(STYLES_URL, 'utf8');