style-responsive-views

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):

1. 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.

2. 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" />
     )}
     

3. 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.