Mobile Ui

---
name: mobile-ui
description: |
  Мобильный UI на Chakra UI v3: адаптивные компоненты, breakpoints, Drawer и нижняя навигация, touch-цели 44px. Загружай ДО вёрстки шапки с Drawer и адаптивных flex-блоков и когда на mobile элементы уезжают вбок вместо переноса вниз, Drawer раздувает шапку и не занимает высоту экрана, подпись Field.Select обрезается, TS2322 на touchAction в layerStyle.
---

# Mobile UI Skill

Руководство по мобильному UI с Chakra UI v3.

## ⚠️ Ловушки (разборы в доках)

- [chakra-flexwrap-column-direction-overflow](/.claude/docs/chakra-flexwrap-column-direction-overflow.md) — `flexWrap="wrap"` рядом с `direction` column: элементы уезжают вбок
- [chakra-drawer-missing-positioner-inline-render](/.claude/docs/chakra-drawer-missing-positioner-inline-render.md) — `Drawer.Content` без `Drawer.Positioner`: блок в потоке, шапка раздувается
- [chakra-select-flex-item-maxw-collapse](/.claude/docs/chakra-select-flex-item-maxw-collapse.md) — `maxW` вокруг `Field.Select` сжимает подпись до стрелки
- [chakra-layer-style-property-allowlist](/.claude/docs/chakra-layer-style-property-allowlist.md) — `touchAction` вне списка свойств layerStyle: TS2322

## Quick Reference

### Breakpoints

| Breakpoint | px      | Описание            |
| ---------- | ------- | ------------------- |
| `base`     | 0px     | Мобильные (default) |
| `sm`       | ~480px  | Большие мобильные   |
| `md`       | ~768px  | Планшеты            |
| `lg`       | ~1024px | Ноутбуки            |
| `xl`       | ~1280px | Десктопы            |
| `2xl`      | ~1536px | Большие экраны      |

### Синтаксис

```tsx
// Object синтаксис (рекомендуется)
<Box p={{ base: 4, md: 6, lg: 8 }} />
<Box display={{ base: 'block', md: 'flex' }} />

// Hide/Show
<Box hideFrom="md">Только mobile</Box>
<Box hideBelow="md">Только desktop</Box>

// Range targeting (v3)
<Box display={{ mdToXl: 'flex' }} />  // между md и xl
<Box display={{ lgOnly: 'none' }} />  // только lg
<Box display={{ smDown: 'block' }} /> // до sm включительно
```

### Touch Targets

```tsx
// Минимум 44×44px для touch
<Button size={{ base: 'lg', md: 'md' }}>Кнопка</Button>
<IconButton minH="44px" minW="44px" aria-label="Действие" />
```

### useBreakpointValue

```tsx
import { useBreakpointValue } from '@chakra-ui/react'

const columns = useBreakpointValue({ base: 1, md: 2, lg: 3 })
const isMobile = useBreakpointValue({ base: true, md: false })
```

---

## Ключевые принципы

1. **Mobile-first** — пиши сначала для `base`, потом добавляй стили для больших экранов
2. **Touch targets 44×44px** — минимальный размер интерактивных элементов
3. **Thumb zone** — важные элементы в нижней части экрана для одноручного использования
4. **`100dvh`** — dynamic viewport height учитывает мобильную клавиатуру

---

## Содержание

- [breakpoints.md](reference/breakpoints.md) — Система брейкпоинтов Chakra UI v3
- [responsive-syntax.md](reference/responsive-syntax.md) — Синтаксис responsive props
- [layouts.md](reference/layouts.md) — Адаптивные layout паттерны
- [navigation.md](reference/navigation.md) — Мобильная навигация
- [touch-friendly.md](reference/touch-friendly.md) — Touch targets, accessibility
- [patterns.md](reference/patterns.md) — Готовые паттерны из проекта
- [testing.md](reference/testing.md) — DevTools, тестирование

---

## См. также

- [UI компоненты](/.claude/docs/ui-components.md) — Chakra UI v3 паттерны