ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-25 11:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fit chat table cards to their columns (#122297)

Browse Source 
* test(ui): cover chat table card width

* fix(ui): fit chat table cards to columns
This commit is contained in:
Vyctor H. Brzezowski
2026-08-11 22:10:23 -03:00
committed by GitHub
parent ff73a14f5a
commit 9dfc26ba63
2 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/chat/chat-responsive.browser.test.ts
+41
View File
@@ -2055,6 +2055,47 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => {
},
);
it.each(["dark", "light"] as const)(
"fits short table cards to their columns in %s mode",
async (themeMode) => {
const page = await openBrowserPage(800, 400);
try {
await page.setContent(
`<!doctype html><html data-theme-mode="${themeMode}"><head><style>${readUiCss()}</style></head><body>
<div class="chat-text">
<div data-table-lane style="width: 680px">
<table data-short-table><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Gateway</td><td>Ready</td></tr></tbody></table>
</div>
<div data-narrow-table-lane style="width: 160px">
<table data-narrow-table><thead><tr><th>Name</th><th>Status</th></tr></thead><tbody><tr><td>Gateway</td><td>Ready</td></tr></tbody></table>
</div>
</div>
</body></html>`,
);
const geometry = await page.evaluate(() => {
const rectFor = (selector: string) =>
document.querySelector<HTMLElement>(selector)!.getBoundingClientRect();
const shortTable = rectFor("[data-short-table]");
const lastCell = rectFor("[data-short-table] tbody td:last-child");
return {
laneWidth: rectFor("[data-table-lane]").width,
narrowLaneWidth: rectFor("[data-narrow-table-lane]").width,
narrowTableWidth: rectFor("[data-narrow-table]").width,
shortTableWidth: shortTable.width,
trailingGap: shortTable.right - lastCell.right,
};
});
expect(geometry.shortTableWidth).toBeLessThan(geometry.laneWidth);
expect(geometry.trailingGap).toBeLessThanOrEqual(1);
expect(geometry.narrowTableWidth).toBeCloseTo(geometry.narrowLaneWidth, 0);
} finally {
await closeBrowserPage(page);
}
},
);
it.each(["dark", "light"] as const)(
"keeps mobile controls inside the viewport with touch targets in %s mode",
async (themeMode) => {
ui/src/styles/chat/text.css
+1 -1
View File
@@ -77,7 +77,7 @@
border-radius: var(--radius-md);
border-collapse: separate;
border-spacing: 0;
width: 100%;
width: fit-content;
max-width: 100%;
background: color-mix(in srgb, var(--accent) 2%, var(--bg-elevated));
box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 4%, transparent);