responsive-design

# Responsive Design for Snilld-CRM

Ensures all interfaces work beautifully on mobile, tablet, and desktop devices.

## Mobile-First Approach

**Start with mobile, then enhance for larger screens:**

```css
/* ✅ GOOD - Mobile-first */
.task-card {
padding: 1rem;
margin-bottom: 1rem;
}

@media (min-width: 768px) {
.task-card {
padding: 1.5rem;
margin-bottom: 1.5rem;
}
}

/* ❌ BAD - Desktop-first */
.task-card {
padding: 2rem;
margin-bottom: 2rem;
}

@media (max-width: 767px) {
.task-card {
padding: 1rem; /* Override */
}
}
```

## Breakpoints

**Standard breakpoints:**
```css
/* Mobile */
@media (max-width: 767px) { }

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Large Desktop */
@media (min-width: 1440px) { }
```

## Touch-Friendly Targets

**Minimum touch target size: 44x44px**

```css
/* ✅ GOOD - Touch-friendly button */
.snilld-btn {
min-height: 44px;
min-width: 44px;
padding: 12px 24px;
}

/* ❌ BAD - Too small for touch */
.snilld-btn {
height: 24px;
padding: 4px 8px;
}
```

**Adequate spacing between interactive elements:**
```css
/* ✅ GOOD - Adequate spacing */
.action-buttons {
display: flex;
gap: 1rem; /* 16px minimum */
}

/* ❌ BAD - Too close together */
.action-buttons {
display: flex;
gap: 4px; /* Too small */
}
```

## Flexible Layouts

### Flexbox for Responsive Layouts

```css
/* ✅ GOOD - Flexible grid */
.kanban-columns {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.kanban-column {
flex: 1 1 300px; /* Grow, shrink, min-width */
min-width: 300px;
}

@media (max-width: 767px) {
.kanban-column {
flex: 1 1 100%; /* Full width on mobile */
min-width: 100%;
}
}
```

### CSS Grid for Complex Layouts

```css
/* ✅ GOOD - Responsive grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}

@media (max-width: 767px) {
.dashboard-grid {
grid-template-columns: 1fr; /* Single column */
}
}
```

## Responsive Tables

**Tables are challenging on mobile - use alternatives:**

### Option 1: Horizontal Scroll

```css
/* ✅ GOOD - Scrollable table */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
.table-wrapper {
/* Add visual indicator for scrolling */
position: relative;
}

.table-wrapper::after {
content: '→';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
}
```

### Option 2: Card Layout on Mobile

```html

......

```

```css
.desktop-only {
display: table;
}

.mobile-only {
display: none;
}

@media (max-width: 767px) {
.desktop-only {
display: none;
}

.mobile-only {
display: block;
}
}
```

### Option 3: Stacked Table

```css
/* ✅ GOOD - Stacked table on mobile */
@media (max-width: 767px) {
.responsive-table,
.responsive-table thead,
.responsive-table tbody,
.responsive-table th,
.responsive-table td,
.responsive-table tr {
display: block;
}

.responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

.responsive-table tr {
border: 1px solid #ccc;
margin-bottom: 1rem;
}

.responsive-table td {
border: none;
position: relative;
padding-left: 50%;
}

.responsive-table td:before {
content: attr(data-label);
position: absolute;
left: 6px;
width: 45%;
white-space: nowrap;
font-weight: bold;
}
}
```

## Responsive Forms

### Stack Form Fields on Mobile

```css
/* ✅ GOOD - Stacked form */
.form-row {
display: flex;
gap: 1rem;
}

.form-field {
flex: 1;
}

@media (max-width: 767px) {
.form-row {
flex-direction: column;
}
}
```

### Full-Width Inputs on Mobile

```css
/* ✅ GOOD - Full-width inputs */
input[type="text"],
input[type="email"],
select,
textarea {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
```

## Responsive Modals

**Modals should be full-screen on mobile:**

```css
/* ✅ GOOD - Responsive modal */
.modal {
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
}

@media (max-width: 767px) {
.modal {
width: 100%;
max-width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
margin: 0;
}
}
```

## Navigation

### Mobile Menu

```css
/* ✅ GOOD - Mobile hamburger menu */
.desktop-nav {
display: flex;
}

.mobile-menu-toggle {
display: none;
}

@media (max-width: 767px) {
.desktop-nav {
display: none;
}

.mobile-menu-toggle {
display: block;
}

.mobile-nav {
position: fixed;
top: 0;
left: -100%;
width: 80%;
height: 100vh;
background: white;
transition: left 0.3s;
z-index: 1000;
}

.mobile-nav.active {
left: 0;
}
}
```

## Images & Media

### Responsive Images

```html


```

### Responsive Videos

```css
/* ✅ GOOD - Responsive video */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}

.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```

## Typography

### Responsive Font Sizes

```css
/* ✅ GOOD - Responsive typography */
h1 {
font-size: 2rem; /* Mobile */
}

@media (min-width: 768px) {
h1 {
font-size: 2.5rem;
}
}

@media (min-width: 1024px) {
h1 {
font-size: 3rem;
}
}
```

### Readable Line Length

```css
/* ✅ GOOD - Optimal line length */
.content {
max-width: 65ch; /* Optimal reading width */
margin: 0 auto;
}
```

## KANBAN Board Responsive

**For Snilld-CRM KANBAN specifically:**

```css
/* ✅ GOOD - Responsive KANBAN */
.kanban-board {
display: flex;
gap: 1rem;
overflow-x: auto;
}

.kanban-column {
flex: 0 0 300px;
min-width: 300px;
}

@media (max-width: 1023px) {
.kanban-column {
flex: 0 0 250px;
min-width: 250px;
}
}

@media (max-width: 767px) {
.kanban-column {
flex: 0 0 280px; /* Wider on mobile for readability */
min-width: 280px;
}

.kanban-board {
gap: 0.5rem;
}
}
```

## Testing Checklist

Before releasing responsive code:

- [ ] Tested on mobile (320px - 767px)
- [ ] Tested on tablet (768px - 1023px)
- [ ] Tested on desktop (1024px+)
- [ ] Touch targets minimum 44x44px
- [ ] Adequate spacing between elements
- [ ] Text readable without zooming
- [ ] Forms usable on mobile
- [ ] Tables have mobile alternative
- [ ] Modals work on mobile
- [ ] Navigation works on mobile
- [ ] Images scale properly
- [ ] No horizontal scrolling (unless intentional)
- [ ] Tested in portrait and landscape