лендинг: пятая плитка падала на вторую строку, столбец «Расхождение» читался пустым #3290

Merged

bot-backend merged 2 commits from fix/mera-kpi-grid-and-table into main

2026-08-31 09:26:35 +00:00

bot-backend commented

2026-08-31 06:30:01 +00:00

Collaborator

Оба дефекта замечены владельцем на живой странице.

Плитки

Пять плиток блока сверки не помещались в строку: четыре вставали в ряд, пятая падала вниз одна и висела слева — читалось как обрезанная вёрстка, а не как акцент.

Причина измерена, а не угадана. Контейнер на проде 1168px, а minmax(220px)×5 + gap 20px×4 = 1180px — не хватало 12 пикселей.

Сетка переведена с grid на flex-wrap с flex: 1 1 200px: 5×200 + 4×20 = 1080 ≤ 1168. Важно, что решение не подгонялось под «ровно пять» — пятая плитка приходит из /stats и может отсутствовать. Проверено клонированием плиток: пять в ряд по 218px, четыре по 277px; при 1000px — четыре, при 820 — три плюс растянутая, при 600 — два на два. Огрызка нет ни в одном случае.

Столбец «Расхождение»

Заголовок был прижат к правому краю, а значения шли от левого — правый край текста значений на 1296px против края шапки 1511px. Глаз читал столбец как пустой, что владелец и сообщил.

text-align: right у .accCellErr — теперь оба края совпадают в 1511px.

Мобильная раскладка держится не порядком вставки, а порядком в файле: @media (max-width: 719px) стоит после базового правила при равной специфичности, поэтому на 390px выравнивание остаётся левым, а ::before с data-label цел.

Проверки

vitest 13 файлов / 147 passed · tsc rc=0 · eslint --max-warnings 0 rc=0 — всё перепрогнано ревьюером независимо в отдельном worktree, он же пересчитал арифметику ширин.

Правка только в CSS: +13/−2, без сырого hex, без чисел в тексте, TSX и токены не тронуты.

Оговорки

Таблицу локально проверить было нечем — без бэкенда витрина пуста. Правило вкинуто в прод клиентски по хешированному классу, совпадение краёв замерено на трёх строках.
На ~820px последняя плитка растягивается на всю строку — осознанно, отдельный брейкпоинт не заводился.
Тестов на раскладку нет: вёрстку этим набором не проверить, снятие правки ни один тест не покрасит.

Оба дефекта замечены владельцем на живой странице. ## Плитки Пять плиток блока сверки не помещались в строку: четыре вставали в ряд, пятая падала вниз одна и висела слева — читалось как обрезанная вёрстка, а не как акцент. **Причина измерена, а не угадана.** Контейнер на проде 1168px, а `minmax(220px)×5 + gap 20px×4 = 1180px` — не хватало **12 пикселей**. Сетка переведена с `grid` на `flex-wrap` с `flex: 1 1 200px`: `5×200 + 4×20 = 1080 ≤ 1168`. Важно, что решение не подгонялось под «ровно пять» — пятая плитка приходит из `/stats` и может отсутствовать. Проверено клонированием плиток: пять в ряд по 218px, четыре по 277px; при 1000px — четыре, при 820 — три плюс растянутая, при 600 — два на два. Огрызка нет ни в одном случае. ## Столбец «Расхождение» Заголовок был прижат к правому краю, а значения шли от левого — правый край текста значений на 1296px против края шапки 1511px. Глаз читал столбец как пустой, что владелец и сообщил. `text-align: right` у `.accCellErr` — теперь оба края совпадают в 1511px. Мобильная раскладка держится не порядком вставки, а порядком в файле: `@media (max-width: 719px)` стоит **после** базового правила при равной специфичности, поэтому на 390px выравнивание остаётся левым, а `::before` с `data-label` цел. ## Проверки `vitest` 13 файлов / 147 passed · `tsc` rc=0 · `eslint --max-warnings 0` rc=0 — всё перепрогнано ревьюером независимо в отдельном worktree, он же пересчитал арифметику ширин. Правка только в CSS: +13/−2, без сырого hex, без чисел в тексте, TSX и токены не тронуты. ## Оговорки - Таблицу локально проверить было нечем — без бэкенда витрина пуста. Правило вкинуто в прод клиентски по хешированному классу, совпадение краёв замерено на трёх строках. - На ~820px последняя плитка растягивается на всю строку — осознанно, отдельный брейкпоинт не заводился. - Тестов на раскладку нет: вёрстку этим набором не проверить, снятие правки ни один тест не покрасит.

bot-backend added 1 commit 2026-08-31 06:30:02 +00:00

fix(mera-public): плитки точности в один ряд, «Расхождение» по одному краю

CI Trade-In / changes (pull_request) Successful in 9s

Details

CI Trade-In / backend-tests (pull_request) Has been skipped

Details

CI Trade-In / browser-tests (pull_request) Has been skipped

Details

CI / changes (pull_request) Successful in 11s

Details

CI / backend-tests (pull_request) Has been skipped

Details

CI / frontend-tests (pull_request) Has been skipped

Details

CI / openapi-codegen-check (pull_request) Has been skipped

Details

CI Trade-In / frontend-checks (pull_request) Successful in 1m21s

Details

28bf3a82d7

Пятая плитка (тёмная, из /stats) не влезала в грид: контейнер 1168px,
minmax(220px) + gap 20px требуют 1180px — плитка падала на вторую строку
одна и узкая, читалось как обрыв вёрстки. Заменил грид на flex-wrap с общим
базисом 200px: пять плиток встают в ряд, четыре — тоже, а на узких ширинах
остаток растягивается на всю строку вместо огрызка слева.

Значения столбца «Расхождение» стояли по левому краю ячейки, а заголовок —
по правому, из-за чего столбец читался пустым. Выровнял значения вправо,
по краю заголовка; на мобильном брейке text-align по-прежнему сбрасывается
в left (карточки с data-label не тронуты).

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

bot-backend added 1 commit 2026-08-31 09:24:39 +00:00

Merge branch 'main' into fix/mera-kpi-grid-and-table

CI Trade-In / browser-tests (pull_request) Has been skipped

Details

CI / backend-tests (pull_request) Has been skipped

Details

CI / openapi-codegen-check (pull_request) Has been skipped

Details

CI Trade-In / frontend-checks (pull_request) Successful in 1m8s

Details

CI Trade-In / changes (pull_request) Successful in 9s

Details