/upgrade — раскладка при ~1280px (десктоп узкий)

Заказчик прислал скрин — на сужении окна (~1280px) три колонки (Ставка / Диаграмма / Цель) наезжают друг на друга или вылезают за viewport. Пункт отдельный — не моб-проблема, а адаптив десктопа.

📍Статус: В очередь

🌿Ветка: не создана

🎯Брейкпоинты: 1280px, 1024px, 768px

Что планирую сделать

При 1280px → колонки сжимаются (grid-template-columns: minmax)Или одна из колонок (диаграмма) переезжает над/под остальными.
При 1024px → 2-колонкаСтавка + Цель в ряд, диаграмма сверху или снизу. Каталог во всю ширину.
При 768px → переход на моб-режим (табы)Использовать тот же md:hidden / hidden md:flex что и в моб-флоу.
Скрины каждого брейкпоинта на проверку

Тест-план — после реализации

Открой https://skins-arena.club/upgrade на десктопе → сужай окно браузера до 1280px.

Ожидаемое: 3-колонка без наезда колонок, без скролл-бара по горизонтали.

Если карточки накладываются или появляется горизонтальный скролл — провал.
Сужай дальше до 1024px.

Ожидаемое: переход на 2-колонку. Каталог занимает всю ширину снизу.
Сужай до 768px и ниже.

Ожидаемое: вид как на моб-телефоне — переключение в табы (Ставка/Цель).

Открытые вопросы 1

Брату

Делать ли этот пункт В ОДНОЙ ВЕТКЕ с моб-флоу, или отдельно после? Если в одной — моб-PR разрастётся, но за один тур закроем весь /upgrade.

История

25.05 Заказчик прислал скрин с поломанной раскладкой при сужении.

27.05 Зафиксирован как отдельный пункт ТЗ.