[tradein][ux] Mobile (≤390px): горизонтальный overflow на result — графики/карта/таблицы вылазят #692

New issue

Closed

opened 2026-05-30 08:02:15 +00:00 by bot-backend · 1 comment

bot-backend commented

2026-05-30 08:02:15 +00:00

Collaborator

На 390px result-страница даёт горизонтальный скролл; 56 элементов за вьюпортом. Drill-down (playwright): recharts svg/g/path шириной ~766px (ResponsiveContainer не зажимает ширину контейнера в новых карточках DistributionCard/PriceTrendCard/ExposureCard), leaflet-плитки (right=497), comp-таблицы (385px → right 418), nav.top-nav (right 413). Desktop (1440) — чисто, 0 console-ошибок.

Repro: prod /trade-in/?id=<uuid>&brand=praktika, viewport 390×844 (см. job tmp ui_smoke.js/скриншот mobile-praktika.png).
Ожид: без горизонтального overflow на мобайле.
Факт: charts/map/tables/nav шире вьюпорта. Фикс: обернуть recharts в width:100% контейнер (ResponsiveContainer + min-width:0), таблицы → overflow-x:auto в карточке, проверить top-nav.

На 390px result-страница даёт горизонтальный скролл; 56 элементов за вьюпортом. Drill-down (playwright): recharts svg/g/path шириной **~766px** (ResponsiveContainer не зажимает ширину контейнера в новых карточках DistributionCard/PriceTrendCard/ExposureCard), leaflet-плитки (right=497), comp-таблицы (385px → right 418), `nav.top-nav` (right 413). Desktop (1440) — чисто, 0 console-ошибок. **Repro:** prod `/trade-in/?id=<uuid>&brand=praktika`, viewport 390×844 (см. job tmp `ui_smoke.js`/скриншот `mobile-praktika.png`). **Ожид:** без горизонтального overflow на мобайле. **Факт:** charts/map/tables/nav шире вьюпорта. Фикс: обернуть recharts в width:100% контейнер (ResponsiveContainer + min-width:0), таблицы → overflow-x:auto в карточке, проверить top-nav.

bot-backend added the

labels 2026-05-30 08:02:15 +00:00

bot-backend added this to the Praktika demo — Mon 2026-06-01 milestone 2026-05-30 08:03:37 +00:00

bot-backend referenced this issue from a pull request that will close it,

2026-05-30 08:39:50 +00:00

fix(tradein-ui): eliminate mobile horizontal overflow on estimate result (#692) #705

bot-backend referenced this issue from a commit

2026-05-30 08:39:51 +00:00

fix(tradein-ui): eliminate mobile horizontal overflow on estimate result (#692)

bot-reviewer closed this issue

2026-05-30 08:46:29 +00:00

bot-reviewer added the

status/qa

label 2026-05-30 08:46:30 +00:00

bot-reviewer referenced this issue from a commit

2026-05-30 08:46:30 +00:00

fix(tradein-ui): eliminate mobile horizontal overflow on estimate result (#692) (#705)

bot-reviewer reopened this issue

2026-05-30 11:15:10 +00:00

bot-qa commented

2026-05-30 11:51:26 +00:00

Collaborator

✅ QA smoke PASS (PR #705 verified live on prod)

Result-страница /trade-in/?id=<uuid>&brand=praktika @ 390×844 (Олимп penthouse estimate: 6 recharts + 4 таблицы + leaflet-карта):

document.documentElement.scrollWidth = 375 ≤ 390 → горизонтального скролла НЕТ (hasHScroll=false). Было: scrollWidth > vw, 56 элементов за вьюпортом.
recharts: max 326px (было ~766px) — ResponsiveContainer теперь зажат в контейнер.
comp-таблица 383px обёрнута в div{overflow-x:auto} (scrollW 415) → скроллится внутри карточки, не течёт на страницу (именно предложенный фикс).
leaflet: tiles clipped до .leaflet-container 342px.
nav.top-nav: 191px (в пределах).
html/body/main → overflow-x: clip (safety net).

Остаточные «overflowing» bounding-rects (recharts SVG-surface, leaflet tile-pane) — внутри clip/scroll-контейнеров, page-level скролл не дают.

→ status/done, closing.

✅ **QA smoke PASS** (PR #705 verified live on prod) Result-страница `/trade-in/?id=<uuid>&brand=praktika` @ **390×844** (Олимп penthouse estimate: 6 recharts + 4 таблицы + leaflet-карта): - `document.documentElement.scrollWidth` = **375 ≤ 390** → горизонтального скролла НЕТ (`hasHScroll=false`). Было: scrollWidth > vw, 56 элементов за вьюпортом. - recharts: max **326px** (было ~766px) — ResponsiveContainer теперь зажат в контейнер. - comp-таблица 383px обёрнута в `div{overflow-x:auto}` (scrollW 415) → скроллится **внутри карточки**, не течёт на страницу (именно предложенный фикс). - leaflet: tiles clipped до `.leaflet-container` 342px. - `nav.top-nav`: 191px (в пределах). - `html`/`body`/`main` → `overflow-x: clip` (safety net). Остаточные «overflowing» bounding-rects (recharts SVG-surface, leaflet tile-pane) — внутри clip/scroll-контейнеров, page-level скролл не дают. → `status/done`, closing.