Skip to content

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

Open

Description

@hamzaPixl

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions