[eric] tool-ui: data-table renders as a real grid (force table layout + container-type), not the column-hiding mobile accordion

This commit is contained in:
ciregenz
2026-07-21 15:37:01 -07:00
parent 8c22ec8c80
commit 9e8ae56e45
2 changed files with 9 additions and 1 deletions
+4 -1
View File
@@ -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': {
+5
View File
@@ -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 {