hansjone/dsh-im-ops
1
0
Fork 0
mirror of https://github.com/hansjone/dsh-im-ops.git synced 2026-10-10 13:10:44 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(ui): keep bot status in card top-right

Browse source
This commit is contained in:
xmanrui 2026-08-26 17:27:48 +08:00
parent 9664e85599
commit 2d395860b3
4 changed files with 12 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

6
lib/client.js
View file

@ -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; }

6
plugin-src/client/styles.js
View file

@ -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; }

3
test/channels/telegram/client-ui.test.mjs
View file

@ -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%;/);

10
test/client-ui.test.mjs
View file

@ -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');