@optifye/dashboard-core 3.0.0 → 3.0.1

package/README.md

@@ -196,6 +196,40 @@ This CSS file includes:
 
 **Note:** You do NOT need to separately import `react-day-picker/dist/style.css` as these styles are already included in the package's global CSS.
 
+## Mobile Responsiveness
+
+All dashboard components are designed to be fully responsive and mobile-friendly:
+
+### Responsive Features
+
+- **Adaptive Grid Layouts**: Workspace video grids automatically adjust to show 2x2 layout on mobile screens
+- **Responsive Text Sizes**: Text sizes scale appropriately across different screen sizes
+- **Touch-Optimized Controls**: Buttons and interactive elements are sized for touch interaction
+- **Flexible KPI Cards**: KPI cards stack vertically on mobile screens for better readability
+- **Mobile-First Navigation**: Compact headers and navigation elements on smaller screens
+
+### Breakpoint System
+
+The dashboard uses Tailwind CSS breakpoints:
+- Mobile: < 640px (default)
+- Small (sm): ≥ 640px
+- Medium (md): ≥ 768px
+- Large (lg): ≥ 1024px
+- Extra Large (xl): ≥ 1280px
+
+### Usage Example for Mobile View
+
+```tsx
+// The dashboard automatically adapts to mobile screens
+<HomeView 
+  defaultLineId={defaultLineId}
+  factoryViewId={factoryViewId}
+  // ... other props
+/>
+```
+
+Components handle responsive behavior internally, no additional configuration needed.
+
 ## Troubleshooting
 
 ### Next.js Module Resolution Error