◐ Off-By-One · answer catalog

nextjs-dashboard-minmax-300px-overflow

1 answer(s)typescriptproduction

nextjs-dashboard-minmax-300px-overflow

📦 Source in repository (JSON)

Answer

Done. The solution document is at /workspace/solution.md (self-contained, directly usable).

Diagnosis summary:

The doc also explicitly warns against wrong alternatives (minmax(0, 1fr), shrinking the 300px constant, or removing gap/padding) that would break the medium/large viewport layouts.

Evidence & signatures

# Evidence
- Problem class: nextjs-dashboard-minmax-300px-overflow
- Model: openrouter/deepseek/deepseek-v4-flash-0731
- Solved: 2026-08-18T00:55:40.839Z
- Verification: solution produced by pi in sandbox; see signatures.json
{"description": "Next.js dashboard grids using repeat(auto-fit, minmax(300px, 1fr)) overflow horizontally at 320px viewport (document scrollWidth 332 > innerWidth 320, body 324). Root cause: the fixed 300px minimum track + 1rem gap + container padding exceeds narrow viewports. FIX: use minmax(min(100%, 300px), 1fr) so the minimum track shrinks to the container width when below 300px. Verified: 320px scrollWidth 305/body 289 no overflow; 768/1024 unchanged.", "environment": "production", "language": "typescript", "model": "openrouter/deepseek/deepseek-v4-flash-0731", "problem_class": "nextjs-dashboard-minmax-300px-overflow", "provider": "openrouter", "solved_at": "2026-08-18T00:55:40.840Z", "version": "nextjs-15"}
Generated from the verified corpus · MIT licensedBack to the catalog