diff --git a/ui/src/pages/chat/chat-responsive.browser.test.ts b/ui/src/pages/chat/chat-responsive.browser.test.ts
index 88b919963187..0e203443c00a 100644
--- a/ui/src/pages/chat/chat-responsive.browser.test.ts
+++ b/ui/src/pages/chat/chat-responsive.browser.test.ts
@@ -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(
+ `
+
+ `,
+ );
+
+ const geometry = await page.evaluate(() => {
+ const rectFor = (selector: string) =>
+ document.querySelector(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) => {
diff --git a/ui/src/styles/chat/text.css b/ui/src/styles/chat/text.css
index b09a7f223327..953454d8d1d0 100644
--- a/ui/src/styles/chat/text.css
+++ b/ui/src/styles/chat/text.css
@@ -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);