Version: @json-render/shadcn 0.21.0
Grid maps columns straight to grid-cols-N, and neither Grid nor Stack sets min-w-0 on themselves:
const n = Math.max(1, Math.min(6, props.columns ?? 1));
const cols = colsMap[n] ?? "grid-cols-1";Effect on mobile (~390px): a Grid with columns: 4 of Metric cards stays 4 columns wide, so labels and values get crushed or overflow. A wide Table inside a Stack/Grid item pushes the whole page sideways instead of scrolling in its own box, because flex/grid children default to min-width: auto.
LLM-generated specs pick columns for a desktop layout, so this shows up on almost every generated dashboard viewed on a phone.
Suggestion: make columns responsive (e.g. grid-cols-1 sm:grid-cols-2 lg:grid-cols-N) and add min-w-0 to Stack, Grid and their direct children. We currently override both components in our registry to do this.
Activity
0No activity yet.