Merge pull request 'лендинг: пятая плитка падала на вторую строку, столбец «Расхождение» читался пустым' (#3290) from fix/mera-kpi-grid-and-table into main
Some checks failed
Deploy Trade-In / perimeter-smoke (push) Blocked by required conditions
Deploy Trade-In / deploy-status (push) Blocked by required conditions
Deploy Trade-In / changes (push) Successful in 14s
Deploy Trade-In / test (push) Has been skipped
Deploy Trade-In / build-browser (push) Has been skipped
Deploy Trade-In / deploy (push) Blocked by required conditions
Deploy Trade-In / build-backend (push) Has been skipped
Deploy Trade-In / build-frontend (push) Has been cancelled

This commit is contained in:
bot-backend 2026-08-31 09:26:34 +00:00
commit 86e6956257

View file

@ -983,9 +983,14 @@
text-wrap: pretty; text-wrap: pretty;
} }
/* Плиток бывает четыре или пять (пятая тёмная, приходит из /stats и может
не прийти). Грид с фиксированной minmax-колонкой ронял пятую на вторую
строку одну и узкую читалось как обрыв. Flex-wrap с общим базисом делает
строку цельной при любом числе плиток: что помещается стоит в ряд,
остаток растягивается на всю ширину, а не висит слева огрызком. */
.accKpiGrid { .accKpiGrid {
display: grid; display: flex;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); flex-wrap: wrap;
gap: 20px; gap: 20px;
margin: 0 0 32px; margin: 0 0 32px;
padding: 0; padding: 0;
@ -993,6 +998,8 @@
} }
.accKpiTile { .accKpiTile {
flex: 1 1 200px;
min-width: 0;
background: var(--b2c-page-bg); background: var(--b2c-page-bg);
border: 1px solid var(--b2c-line); border: 1px solid var(--b2c-line);
border-radius: 10px; border-radius: 10px;
@ -1100,10 +1107,14 @@
color: var(--b2c-ink); color: var(--b2c-ink);
} }
/* Правый край общий с заголовком столбца (.accTableHeadCellRight);
иначе значения стоят левее шапки и столбец читается пустым.
На мобильном брейке ниже text-align сбрасывается в left. */
.accCellErr { .accCellErr {
font-family: var(--b2c-font-mono); font-family: var(--b2c-font-mono);
font-size: 12px; font-size: 12px;
color: var(--b2c-muted); color: var(--b2c-muted);
text-align: right;
} }
.accCellGain { .accCellGain {