Правила UI Responsive Design

Назначение

Документ задаёт правила адаптивной вёрстки frontend-приложений Pin. Цель — поддержать диапазон устройств от мобильных (320px) до широкоэкранных (2560px+), с целевым диапазоном 900–1400px для основных рабочих сценариев pin-admin.

Целевые устройства и диапазоны

Диапазон	Устройство	Поддержка	Цель
320–479px	Мобильный портрет (iPhone SE и аналоги)	Полная	Просмотр, заполнение записей, чек-листов
480–767px	Мобильный landscape, маленькие планшеты	Полная	То же + просмотр расписаний
768–899px	Планшет портрет (iPad mini)	Полная	+ редактирование записей
900–1279px	Малый ноутбук, целевой минимум	Основной	Все операции, включая конструктор
1280–1439px	Стандартный ноутбук	Основной	Все операции
1440–1919px	Целевой десктоп	Основной	Все операции, удобно для конструктора и dashboard
1920–2559px	Full HD широкий	Полная	Все операции + multi-column layouts
≥ 2560px	2K/4K широкий	Усиленная	Multi-column layouts, побольше data density

Базовые breakpoints

Используются Tailwind 4.3 breakpoints с расширением:

// tailwind.config.ts
export default {
  theme: {
    screens: {
      xs: "480px",
      sm: "640px",
      md: "768px",
      lg: "900px",   // целевой минимум для рабочих экранов
      xl: "1280px",
      "2xl": "1440px",
      "3xl": "1920px",
    },
  },
};

Стратегии адаптации

Mobile-first

Базовая верстка пишется для xs (≥320px), затем расширяется через md:, lg:, xl:, 2xl:, 3xl: модификаторы.

Layout patterns

Pattern	Mobile (xs)	Tablet (md)	Desktop (lg+)
Главная навигация	Hamburger drawer	Hamburger drawer	Постоянный sidebar
Header app bar	Compact (только logo + menu + avatar)	Expanded (+ facility switcher)	Full (+ search + breadcrumbs + actions)
Таблицы	Cards view (одна карточка = одна запись)	Cards view + filter chips	Полноценная таблица
Формы	Single column	Single column	2-column для длинных форм
Dashboard	1 widget per row	2 widgets per row	12-col grid с конфигурируемыми widget
Модалы	Full screen sheet	Centered с max-width	Centered с max-width
Side panel	Bottom sheet	Drawer right (300px)	Drawer right (400px)

Адаптивные паттерны данных

Таблица ↔ Cards

Для всех таблиц записей каталогов, чек-листов, дашбордов:

DataTable → виден при ≥ lg (900px)
DataCardsGrid → виден при < lg

Carriage свитч происходит через useBreakpoint("lg") хук + Tailwind utility-классы.

Календарь

Monthly view → виден при ≥ lg
Weekly view → виден при md
Daily list view → виден при < md

Pivot

Pivot всегда рендерится; на мобильных добавляется горизонтальный скролл и sticky первая колонка.

Container queries

Tailwind 4.3 нативно поддерживает @container query. Используется для компонентов, чьё поведение должно зависеть от собственного контейнера, а не viewport:

<div className="@container">
  <div className="grid @lg:grid-cols-2 @2xl:grid-cols-4">
    {/* виджеты адаптируются под размер контейнера */}
  </div>
</div>

Container queries обязательны для:

• Widgets в dashboard (так как dashboard сам ресайзится drag-drop).
• Card components, которые могут быть в разных layouts.

Touch и pointer

Размер	Минимум для touch	Минимум для mouse
Кнопка	44×44px	32×32px
Tap area	44×44px	24×24px
Spacing между tap targets	8px	4px

На устройствах с touch (через @media (pointer: coarse)) увеличиваются размеры interactive элементов.

Responsive типографика

Используется CSS clamp() для плавной адаптации:

:root {
  --font-size-h1: clamp(1.5rem, 4vw, 2.5rem);
  --font-size-h2: clamp(1.25rem, 3vw, 2rem);
  --font-size-body: clamp(0.875rem, 1vw, 1rem);
}

Sidebar и навигация

Mobile (< md)

• Hamburger button в Header app bar.
• При клике открывается полноэкранный drawer слева.
• Backdrop blur + dim background.
• Закрытие по Escape, swipe, click outside, navigate.

Tablet (md–lg)

• Sidebar collapsible (icons-only).
• При раскрытии — overlay над контентом.

Desktop (≥ lg)

• Sidebar постоянный, занимает 240–280px.
• Может быть свёрнут в icons-only через user preference.
• Сохранение состояния в useUiPreferencesStore (Zustand persisted).

Тестирование адаптивности

Инструмент	Использование
Browser DevTools	Manual testing на дефолтных preset устройствах
Playwright viewport sizes	E2E на 320, 768, 900, 1280, 1440, 1920
Storybook viewport addon	Component-level responsive testing
Real device testing	Перед каждым релизом для критичных flows

Производительность на мобильных

• Lazy load для chart/dashboard widgets через React.lazy + Suspense.
• Avoid layout shifts: skeleton с правильными размерами.
• Минимизировать JS bundles через code-splitting per route.
• Использовать <img loading="lazy"> для всех картинок не в viewport.
• Critical CSS inline через Vite Plus.

Запрещено

• Фиксированная ширина в px без альтернативы для маленьких экранов.
• Горизонтальный scroll на странице (исключение — pivot и временные шкалы внутри блока).
• Hover-only взаимодействия без альтернативы для touch (например, tooltip только на hover).
• Tap targets < 44×44px на touch устройствах.
• vh единицы без fallback для мобильных браузеров (iOS Safari).
• Бесконечный scroll без paginated альтернативы.

Обратные ссылки

Автоссылки: где используется этот документ.

• frontend-design-system-rules.md (1): Правила Frontend Design System
• frontend-form-field-behavior-rules.md (1): Правила Поведения Полей В Формах-Редакторах
• ui-accessibility-rules.md (1): Правила UI Accessibility (A11Y)

Связанные документы

• frontend-rules.md
• frontend-design-system-rules.md
• ui-accessibility-rules.md
• docs/04-frontends/pin-admin/10-responsive/ — детальные правила для приложения.