name	style-responsive-views
description	Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.

Style Responsive Views Playbook

Follow these practices to ensure the ERP dashboard canvas adjusts correctly on multiple devices (Mobile, Tablet, Desktop):

Mobile-First Layout:
- Apply single column configuration as the default: grid-cols-1.
- Upgrade to 2-column or 3-column splits on tablet/desktop sizes: sm:grid-cols-2 lg:grid-cols-3 or lg:grid-cols-4.
Mobile Sidebar Navigation Drawer:
- Hide the left sidebar layout off-screen using translation transforms: -translate-x-full md:translate-x-0.
- Toggle its visibility using parent layout state (e.g., sidebarOpen boolean) by mapping translate-x-0.
- Render a dim backdrop overlay when the sidebar is visible on mobile viewports:
```
{sidebarOpen && (
  <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-xs md:hidden" />
)}
```
Data Grid & Tables Overflow:
- Never let tables overflow their container margins. Wrap tables inside an outer overflow container:
```
<div className="overflow-x-auto w-full">
  <table className="w-full">...</table>
</div>
```
- Truncate long strings (e.g. description fields, user names) using truncate and max-w-xs.

Más de este repositorio

mismo repositorio

Use when adding a brand-new CRUD resource beyond the core entity (e.g. a second model the PS requires).

Use when building or restyling any page or component.

Use when constructing forms, inputs, submit behaviors, validation displays, and feedback toast alerts.

Use when creating new Next.js route handlers using the custom helper wrapper.

Use whenever the Prisma schema changes and a migration is needed.

Use when integrating third-party APIs (e.g. SMTP emails, SMS notification gateways, payment checkout gates, or OCR parsers).

name	style-responsive-views
description	Use when adjusting layout structures, mobile viewport compatibility, sidebar drawer states, and grid alignment blocks.

Follow these practices to ensure the ERP dashboard canvas adjusts correctly on multiple devices (Mobile, Tablet, Desktop):

Mobile-First Layout:
- Apply single column configuration as the default: grid-cols-1.
- Upgrade to 2-column or 3-column splits on tablet/desktop sizes: sm:grid-cols-2 lg:grid-cols-3 or lg:grid-cols-4.
Mobile Sidebar Navigation Drawer:
- Hide the left sidebar layout off-screen using translation transforms: -translate-x-full md:translate-x-0.
- Toggle its visibility using parent layout state (e.g., sidebarOpen boolean) by mapping translate-x-0.
- Render a dim backdrop overlay when the sidebar is visible on mobile viewports:
```
{sidebarOpen && (
  <div onClick={() => setSidebarOpen(false)} className="fixed inset-0 z-20 bg-slate-900/60 backdrop-blur-xs md:hidden" />
)}
```
Data Grid & Tables Overflow:
- Never let tables overflow their container margins. Wrap tables inside an outer overflow container:
```
<div className="overflow-x-auto w-full">
  <table className="w-full">...</table>
</div>
```
- Truncate long strings (e.g. description fields, user names) using truncate and max-w-xs.