# Responsive Design Patterns

This document outlines the responsive design patterns used in the application to ensure a consistent user experience across different devices and screen sizes.

## Breakpoints

The application uses the following breakpoints, based on Tailwind CSS defaults:

- **sm**: 640px and up (small devices like large phones and small tablets)
- **md**: 768px and up (medium devices like tablets)
- **lg**: 1024px and up (large devices like desktops)
- **xl**: 1280px and up (extra large devices)
- **2xl**: 1536px and up (very large screens)

## Viewport Configuration

The application uses the following viewport configuration in the root layout:

```tsx
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
  userScalable: true,
};
```

This ensures proper scaling on mobile devices while allowing users to zoom if needed.

## Layout Patterns

### Responsive Container

- Use `container` class with responsive padding: `px-4 md:px-6`
- Example: `<div className="container px-4 md:px-6">`

### Responsive Flexbox

- Stack elements vertically on small screens, horizontally on larger screens
- Example: `<div className="flex flex-col sm:flex-row">`

### Responsive Grid

- Single column on small screens, multiple columns on larger screens
- Example: `<div className="grid sm:grid-cols-2 lg:grid-cols-3">`

### Responsive Spacing

- Less padding on small screens, more on larger screens
- Example: `<main className="p-4 sm:p-6">`

## Component Patterns

### Responsive Typography

- Smaller font sizes on mobile, larger on desktop
- Example: `<h1 className="text-2xl sm:text-3xl font-bold">`

### Responsive Buttons

- Full-width on small screens, auto-width on larger screens
- Example: `<Button className="w-full sm:w-auto">`

### Responsive Tables

- Card layout on small screens, table layout on larger screens
- Hide less important columns on small screens
- Add horizontal scrolling for tables that don't fit
- Example: See the projects page implementation

### Responsive Forms

- Stack form actions on small screens, side-by-side on larger screens
- Adjust button order for mobile-first experience
- Example: `<CardFooter className="flex flex-col sm:flex-row gap-2">`

### Responsive Navigation

- Use a sidebar that collapses to an icon or off-canvas menu on small screens
- Use a dropdown or hamburger menu for mobile navigation
- Example: See the `Sidebar` component implementation

## Best Practices

1. **Mobile-First Approach**: Start with the mobile layout and progressively enhance for larger screens
2. **Consistent Patterns**: Use the same responsive patterns throughout the application
3. **Avoid Fixed Widths**: Use relative units (%, rem) and flexible layouts
4. **Test on Real Devices**: Verify the responsive design on actual devices, not just browser emulation
5. **Consider Touch Targets**: Make interactive elements large enough for touch (at least 44x44px)
6. **Optimize Images**: Use responsive images with appropriate sizes for different devices
7. **Performance**: Ensure the application performs well on mobile devices with potentially slower connections