managing-apps/.cursor/commands/responsive.md

# responsive

## When to Use

Use this command when you want to:
- Implement responsive/mobile design using DaisyUI components
- Make existing components mobile-friendly with DaisyUI patterns
- Create beautiful, modern responsive layouts following DaisyUI documentation
- Optimize UI for different screen sizes using DaisyUI's responsive features

## Prerequisites

- Component or page file open or specified
- Tailwind CSS configured
- DaisyUI installed and configured
- Reference to DaisyUI documentation: https://daisyui.com/components/
- Understanding of the component's current structure

## Execution Steps

### Step 1: Analyze Current Component

Read the component file to understand its structure:

**If file is open in editor:**
- Use the currently open file

**If file path provided:**
- Read the file: `cat [file-path]`

**Analyze:**
- Current layout structure (grid, flex, etc.)
- Existing responsive classes (if any)
- Component complexity and nesting
- Content that needs to be responsive (tables, forms, charts, cards)

### Step 2: Identify Responsive Requirements

Determine what needs to be responsive:

**Common responsive patterns:**
- **Navigation**: Mobile hamburger menu, desktop horizontal nav
- **Tables**: Horizontal scroll on mobile, full table on desktop
- **Forms**: Stacked inputs on mobile, side-by-side on desktop
- **Cards/Grids**: Single column on mobile, multi-column on desktop
- **Charts**: Smaller on mobile, larger on desktop
- **Modals**: Full screen on mobile, centered on desktop
- **Text**: Smaller on mobile, larger on desktop
- **Spacing**: Tighter on mobile, more spacious on desktop

**Identify:**
- Which elements need responsive behavior
- Breakpoints where layout should change
- Mobile vs desktop content differences

### Step 3: Apply Mobile-First Responsive Design

Implement responsive design using Tailwind's mobile-first approach:

#### 3.1: Breakpoint Strategy

**Tailwind breakpoints (mobile-first):**
- Base (default): Mobile (< 640px)
- `sm:` - Small devices (≥ 640px)
- `md:` - Medium devices (≥ 768px)
- `lg:` - Large devices (≥ 1024px)
- `xl:` - Extra large (≥ 1280px)
- `2xl:` - 2X Extra large (≥ 1536px)

**Pattern:** Start with mobile styles, then add larger breakpoints:
```tsx
// Mobile first: base styles are for mobile
<div className="w-full p-4 md:p-6 lg:p-8">
  // Mobile: full width, padding 4
  // md+: padding 6
  // lg+: padding 8
</div>
```

#### 3.2: Layout Patterns

**Grid Layouts:**
```tsx
// Single column mobile, multi-column desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  {/* Cards */}
</div>

// Responsive grid with auto-fit
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
```

**Flexbox Layouts:**
```tsx
// Stack on mobile, row on desktop
<div className="flex flex-col md:flex-row gap-4">
  {/* Items */}
</div>

// Center on mobile, space-between on desktop
<div className="flex flex-col items-center md:flex-row md:justify-between">
```

**Container Patterns:**
```tsx
// Use layout utility class or custom container
<div className="layout">
  {/* Content with responsive margins */}
</div>

// Or custom responsive container
<div className="w-full px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
```

#### 3.3: Navigation Patterns (DaisyUI Navbar)

**DaisyUI Navbar Pattern** (https://daisyui.com/components/navbar/):
```tsx
// DaisyUI navbar with responsive menu
<div className="navbar bg-base-300">
  {/* Mobile menu button */}
  <div className="navbar-start">
    <button className="btn btn-ghost lg:hidden" onClick={toggleMenu}>
      <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
    <a className="btn btn-ghost text-xl">Logo</a>
  </div>
  
  {/* Desktop navigation */}
  <div className="navbar-center hidden lg:flex">
    <ul className="menu menu-horizontal px-1">
      <li><a>Item 1</a></li>
      <li><a>Item 2</a></li>
    </ul>
  </div>
  
  {/* Navbar end */}
  <div className="navbar-end">
    <button className="btn btn-primary">Action</button>
  </div>
</div>

// Mobile drawer/sidebar (DaisyUI Drawer pattern)
<div className={`drawer lg:drawer-open`}>
  <input id="drawer-toggle" type="checkbox" className="drawer-toggle" checked={isOpen} onChange={toggleMenu} />
  <div className="drawer-side">
    <label htmlFor="drawer-toggle" className="drawer-overlay"></label>
    <ul className="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
      {/* Mobile menu items */}
    </ul>
  </div>
</div>
```

#### 3.4: Table Patterns (DaisyUI Table)

**DaisyUI Table Patterns** (https://daisyui.com/components/table/):
```tsx
// Option 1: Horizontal scroll on mobile (recommended)
<div className="overflow-x-auto">
  <table className="table table-zebra w-full">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      {/* Table rows */}
    </tbody>
  </table>
</div>

// Option 2: Responsive table size (mobile: table-xs, desktop: table)
<div className="overflow-x-auto">
  <table className="table table-xs md:table table-zebra w-full">
    {/* Table content */}
  </table>
</div>

// Option 3: Card layout on mobile, table on desktop
<div className="block md:hidden space-y-4">
  {/* DaisyUI cards for mobile */}
  <div className="card bg-base-100 shadow">
    <div className="card-body">
      {/* Card content matching table data */}
    </div>
  </div>
</div>
<div className="hidden md:block overflow-x-auto">
  <table className="table table-zebra w-full">
    {/* Table for desktop */}
  </table>
</div>
```

#### 3.5: Form Patterns (DaisyUI Form)

**DaisyUI Form Patterns** (https://daisyui.com/components/form/):
```tsx
// DaisyUI form-control with responsive grid
<form className="w-full max-w-2xl mx-auto space-y-4">
  {/* Stacked on mobile, side-by-side on desktop */}
  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div className="form-control">
      <label className="label">
        <span className="label-text">First Name</span>
      </label>
      <input type="text" className="input input-bordered w-full" />
    </div>
    <div className="form-control">
      <label className="label">
        <span className="label-text">Last Name</span>
      </label>
      <input type="text" className="input input-bordered w-full" />
    </div>
  </div>
  
  {/* Full width field */}
  <div className="form-control">
    <label className="label">
      <span className="label-text">Email</span>
    </label>
    <input type="email" className="input input-bordered w-full" />
  </div>
  
  {/* Responsive button */}
  <div className="form-control mt-6">
    <button className="btn btn-primary w-full md:w-auto">Submit</button>
  </div>
</form>
```

#### 3.6: Typography Patterns

**Responsive Text:**
```tsx
// Smaller on mobile, larger on desktop
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold">
  Title
</h1>

<p className="text-sm md:text-base lg:text-lg">
  Content
</p>
```

#### 3.7: Spacing Patterns

**Responsive Spacing:**
```tsx
// Tighter on mobile, more spacious on desktop
<div className="p-4 md:p-6 lg:p-8">
  {/* Content */}
</div>

// Responsive gaps
<div className="flex flex-col gap-2 md:gap-4 lg:gap-6">
  {/* Items */}
</div>
```

#### 3.8: Modal/Dialog Patterns (DaisyUI Modal)

**DaisyUI Modal Patterns** (https://daisyui.com/components/modal/):
```tsx
// Full screen on mobile, centered on desktop
<dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
  <div className="modal-box w-full max-w-none md:max-w-2xl mx-auto">
    <h3 className="font-bold text-lg">Modal Title</h3>
    <p className="py-4">Modal content</p>
    <div className="modal-action">
      <button className="btn" onClick={closeModal}>Close</button>
    </div>
  </div>
  <form method="dialog" className="modal-backdrop" onClick={closeModal}>
    <button>close</button>
  </form>
</dialog>

// Responsive modal with different sizes
<dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
  <div className="modal-box w-11/12 max-w-none md:max-w-lg lg:max-w-2xl">
    {/* Modal content */}
  </div>
</dialog>
```

#### 3.9: Chart/Visualization Patterns

**Responsive Charts:**
```tsx
// Responsive chart container
<div ref={containerRef} className="w-full h-auto">
  <Chart 
    width={containerWidth} 
    height={containerWidth * (isMobile ? 0.8 : 0.6)}
  />
</div>

// Or use aspect ratio
<div className="w-full aspect-[4/3] md:aspect-[16/9]">
  <Chart />
</div>
```

### Step 4: Reference DaisyUI Documentation

**Before implementing any component, check DaisyUI documentation:**
- Open or reference: https://daisyui.com/components/
- Find the component you need (navbar, card, table, modal, etc.)
- Review the component's responsive examples and classes
- Use the exact DaisyUI classes and patterns from the docs

**DaisyUI Documentation Structure:**
- Each component page shows examples
- Copy the exact class names and structure
- Adapt the examples to your use case with responsive breakpoints

### Step 5: Apply DaisyUI Responsive Components

Use DaisyUI components following official documentation: https://daisyui.com/components/

**DaisyUI Responsive Components (from docs):**

1. **Navbar** (https://daisyui.com/components/navbar/):
   - Use `navbar` with `navbar-start`, `navbar-center`, `navbar-end`
   - Mobile hamburger: `btn btn-ghost lg:hidden`
   - Desktop nav: `hidden lg:flex`
   ```tsx
   <div className="navbar bg-base-300">
     <div className="navbar-start">
       <button className="btn btn-ghost lg:hidden">☰</button>
     </div>
     <div className="navbar-center hidden lg:flex">
       {/* Desktop nav items */}
     </div>
   </div>
   ```

2. **Drawer** (https://daisyui.com/components/drawer/):
   - Use `drawer` with `drawer-side` for mobile sidebar
   - Toggle with `drawer-open` class
   ```tsx
   <div className="drawer lg:drawer-open">
     <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
     <div className="drawer-side">
       <label htmlFor="drawer-toggle" className="drawer-overlay"></label>
       <ul className="menu p-4 w-80 min-h-full bg-base-200">
         {/* Sidebar content */}
       </ul>
     </div>
   </div>
   ```

3. **Card** (https://daisyui.com/components/card/):
   - Use `card` with `card-body` for responsive cards
   - Responsive grid: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
   ```tsx
   <div className="card bg-base-100 shadow-xl">
     <div className="card-body p-4 md:p-6">
       <h2 className="card-title text-lg md:text-xl">Title</h2>
       <p className="text-sm md:text-base">Content</p>
     </div>
   </div>
   ```

4. **Table** (https://daisyui.com/components/table/):
   - Wrap in `overflow-x-auto` for mobile scroll
   - Use `table-xs` for mobile, `table` for desktop
   ```tsx
   <div className="overflow-x-auto">
     <table className="table table-zebra w-full">
       {/* Table content */}
     </table>
   </div>
   ```

5. **Modal** (https://daisyui.com/components/modal/):
   - Use `modal` with `modal-box` for responsive modals
   - Full screen mobile: `w-full max-w-none md:max-w-2xl`
   ```tsx
   <dialog className={`modal ${isOpen ? 'modal-open' : ''}`}>
     <div className="modal-box w-full max-w-none md:max-w-2xl">
       {/* Modal content */}
     </div>
   </dialog>
   ```

6. **Form** (https://daisyui.com/components/form/):
   - Use `form-control` with responsive grid
   - Inputs: `input input-bordered w-full`
   ```tsx
   <div className="form-control">
     <label className="label">
       <span className="label-text">Label</span>
     </label>
     <input type="text" className="input input-bordered w-full" />
   </div>
   ```

7. **Bottom Navigation** (https://daisyui.com/components/bottom-navigation/):
   - Use `btm-nav` for mobile bottom navigation
   ```tsx
   <div className="btm-nav lg:hidden fixed bottom-0">
     <button className="active">Home</button>
     <button>Settings</button>
   </div>
   ```

8. **Tabs** (https://daisyui.com/components/tabs/):
   - Use `tabs` with responsive layout
   - Mobile: `tabs tabs-boxed`, Desktop: `tabs tabs-lifted`
   ```tsx
   <div className="tabs tabs-boxed md:tabs-lifted">
     <a className="tab">Tab 1</a>
     <a className="tab tab-active">Tab 2</a>
   </div>
   ```

9. **Dropdown** (https://daisyui.com/components/dropdown/):
   - Use `dropdown` with responsive positioning
   ```tsx
   <div className="dropdown dropdown-end">
     <label tabIndex={0} className="btn btn-ghost">Menu</label>
     <ul className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
       {/* Dropdown items */}
     </ul>
   </div>
   ```

10. **Stats** (https://daisyui.com/components/stats/):
    - Use `stats` with responsive grid
    ```tsx
    <div className="stats stats-vertical md:stats-horizontal shadow w-full">
      <div className="stat">...</div>
    </div>
    ```

### Step 6: Implement Beautiful Mobile UX

**Mobile UX Best Practices:**

1. **Touch Targets:**
   - Minimum 44x44px touch targets
   - Adequate spacing between interactive elements
   ```tsx
   <button className="btn btn-primary min-h-[44px] min-w-[44px]">
     Action
   </button>
   ```

2. **Swipe Gestures:**
   - Consider swipeable cards/carousels
   - Use libraries like `react-swipeable` if needed

3. **Bottom Navigation** (DaisyUI Bottom Nav - https://daisyui.com/components/bottom-navigation/):
   - Use DaisyUI `btm-nav` for mobile bottom navigation
   ```tsx
   <div className="btm-nav lg:hidden fixed bottom-0 z-50 bg-base-300">
     <button className="active text-primary">
       <svg>...</svg>
       <span className="btm-nav-label">Home</span>
     </button>
     <button>
       <svg>...</svg>
       <span className="btm-nav-label">Settings</span>
     </button>
   </div>
   ```

4. **Sticky Headers:**
   - Keep important actions accessible
   ```tsx
   <div className="sticky top-0 z-50 bg-base-100">
     {/* Header content */}
   </div>
   ```

5. **Loading States** (DaisyUI Loading - https://daisyui.com/components/loading/):
   - Use DaisyUI loading spinners appropriately sized for mobile
   ```tsx
   <div className="flex justify-center items-center min-h-[200px]">
     <span className="loading loading-spinner loading-sm md:loading-md lg:loading-lg"></span>
   </div>
   
   // Or use loading text
   <div className="flex flex-col items-center gap-4">
     <span className="loading loading-spinner loading-lg"></span>
     <span className="text-sm md:text-base">Loading...</span>
   </div>
   ```

### Step 7: Test Responsive Breakpoints

Verify the implementation works at different breakpoints:

**Test breakpoints:**
- Mobile: 375px, 414px (iPhone sizes)
- Tablet: 768px, 1024px (iPad sizes)
- Desktop: 1280px, 1536px+

**Check:**
- Layout doesn't break at any breakpoint
- Text is readable at all sizes
- Interactive elements are easily tappable
- Content doesn't overflow horizontally
- Images scale appropriately

### Step 8: Optimize Performance

**Mobile Performance:**

1. **Lazy Loading:**
   - Lazy load images and heavy components
   ```tsx
   <img 
     src={imageSrc} 
     loading="lazy" 
     className="w-full h-auto"
     alt="..."
   />
   ```

2. **Conditional Rendering:**
   - Render mobile/desktop versions conditionally if needed
   ```tsx
   {isMobile ? <MobileComponent /> : <DesktopComponent />}
   ```

3. **Reduce Animations on Mobile:**
   - Consider `prefers-reduced-motion`
   ```tsx
   <div className="transition-transform motion-reduce:transition-none">
   ```

## Error Handling

**If component file not found:**
- Check file path
- Verify file exists
- **STOP**: Cannot proceed without component

**If Tailwind classes not working:**
- Verify Tailwind config includes the file
- Check if classes are in content paths
- Rebuild Tailwind: `npm run build` or check build process

**If layout breaks at breakpoints:**
- Check for conflicting classes
- Verify breakpoint order (mobile-first)
- Test with browser dev tools
- Fix overflow issues with `overflow-x-hidden` on body

**If DaisyUI components not responsive:**
- Check DaisyUI version: `npm list daisyui`
- Verify Tailwind config includes DaisyUI plugin
- Reference DaisyUI docs: https://daisyui.com/components/
- Use DaisyUI's responsive utilities from documentation
- Ensure you're using the correct DaisyUI class names

## Example Execution

**User input:** `/responsive` (with component file open)

**AI execution:**

1. Analyze component: Read `UnifiedTradingModal.tsx`
   - Found: Large form with multiple sections
   - Found: Tables and cards
   - Found: Some responsive classes already present
2. Identify requirements:
   - Form inputs need stacking on mobile
   - Tables need horizontal scroll
   - Modal needs full-screen on mobile
   - Cards need single column on mobile
3. Reference DaisyUI docs:
   - Check https://daisyui.com/components/modal/ for modal patterns
   - Check https://daisyui.com/components/form/ for form patterns
   - Check https://daisyui.com/components/table/ for table patterns
   - Check https://daisyui.com/components/card/ for card patterns
4. Implement responsive using DaisyUI:
   - Update form: Use `form-control` with `grid grid-cols-1 md:grid-cols-2 gap-4`
   - Update tables: Wrap in `overflow-x-auto` with `table table-zebra`
   - Update modal: Use DaisyUI `modal` with `modal-box w-full max-w-none md:max-w-2xl`
   - Update cards: Use DaisyUI `card` with `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
5. Apply mobile UX:
   - Use DaisyUI buttons (already meet 44px touch target)
   - Add responsive spacing: `p-4 md:p-6`
   - Update typography: `text-sm md:text-base`
6. Test: Verify at 375px, 768px, 1024px breakpoints
7. Success: "✅ Component is now fully responsive using DaisyUI components!"

**If table component:**

1. Analyze: Read table component
2. Identify: Table needs mobile-friendly layout
3. Implement:
   - Option 1: Horizontal scroll wrapper
   - Option 2: Card layout for mobile, table for desktop
4. Choose best approach based on data complexity
5. Implement chosen pattern
6. Success: "✅ Table is now responsive with [chosen pattern]!"

## Important Notes

- ✅ **Mobile-first approach** - Base styles for mobile, then add larger breakpoints
- ✅ **Use Tailwind breakpoints** - sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px
- ✅ **DaisyUI components** - Always use DaisyUI components from https://daisyui.com/components/
- ✅ **Follow DaisyUI docs** - Reference official documentation for component usage
- ✅ **Touch targets** - Minimum 44x44px for mobile (DaisyUI buttons meet this)
- ✅ **No horizontal scroll** - Prevent horizontal overflow on mobile
- ✅ **Test all breakpoints** - Verify at 375px, 768px, 1024px, 1280px
- ✅ **Performance** - Lazy load images, optimize for mobile
- ⚠️ **Breakpoint order** - Always mobile-first: base → sm → md → lg → xl → 2xl
- ⚠️ **Content priority** - Show most important content first on mobile
- ⚠️ **Spacing** - Tighter on mobile, more spacious on desktop
- ⚠️ **DaisyUI classes** - Use DaisyUI utility classes (`btn`, `card`, `input`, etc.)
- 📱 **Mobile breakpoints**: < 640px (base), ≥ 640px (sm), ≥ 768px (md)
- 💻 **Desktop breakpoints**: ≥ 1024px (lg), ≥ 1280px (xl), ≥ 1536px (2xl)
- 🎨 **DaisyUI Components**: `navbar`, `drawer`, `card`, `table`, `modal`, `form`, `btm-nav`, `tabs`, `dropdown`, `stats`
- 📚 **DaisyUI Docs**: https://daisyui.com/components/ - Always reference for component patterns
- 🔧 **Layout utility**: Use `.layout` class or custom responsive containers