diff --git a/frontend/src/toolui/registry.tsx b/frontend/src/toolui/registry.tsx
index 39e54561..42092504 100644
--- a/frontend/src/toolui/registry.tsx
+++ b/frontend/src/toolui/registry.tsx
@@ -47,7 +47,10 @@ export const TOOL_UI_REGISTRY: Record<string, ToolUiEntry> = {
     loadSchema: () => import('./components/citation/schema').then((m) => m.SerializableCitationSchema),
   },
   'data-table': {
-    Component: lazy(() => import('./components/data-table').then((m) => ({ default: m.DataTable }))),
+    // Force the real grid (.Table) instead of the responsive default: every chat surface we render
+    // into (card ~380px, fullscreen column ~442px) sits just under the component's @md breakpoint,
+    // so "auto" always fell back to the mobile accordion that buries every column but the first.
+    Component: lazy(() => import('./components/data-table').then((m) => ({ default: m.DataTable.Table }))),
     loadSchema: () => import('./components/data-table/schema').then((m) => m.SerializableDataTableSchema),
   },
   'image': {
diff --git a/frontend/src/toolui/toolui.css b/frontend/src/toolui/toolui.css
index d8f14243..d4ffec5b 100644
--- a/frontend/src/toolui/toolui.css
+++ b/frontend/src/toolui/toolui.css
@@ -82,6 +82,11 @@
   color: var(--foreground);
   font-size: 14px;
   line-height: 1.5;
+  /* The vendored components (data-table, etc.) switch layout on @container width. Without a
+     containment context those queries never match, so a table is stuck in its narrow mobile
+     accordion forever (columns hidden behind a chevron). This makes width-responsive actually work:
+     wide bubble = real grid, narrow = cards. */
+  container-type: inline-size;
 }
 
 .tool-ui-scope {