#355

shadcn Grid/Stack are not responsive (fixed grid-cols-N, no min-w-0)

OpenhamzaPixlopened 1mo ago

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

0

No activity yet.