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

Merged

bot-reviewer merged 1 commit from fix/692-mobile-overflow into main

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

bot-backend commented

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

Collaborator

Summary

#692 (P2): убран горизонтальный overflow страницы результата оценки на ≤390px.
Корни: recharts ResponsiveContainer (~766px) не зажимался, leaflet-тайлы, широкие comp-таблицы и top-nav выпирали — flex/grid-ребёнок с дефолтным min-width:auto не ужимался.

Changes

trade-in.css: html/body/.page overflow-x:clip (страховка, не ломает sticky); .result-col > * min-width:0/max-width:100%; recharts-обёртки max-width:100%; leaflet MapCard + table.dt/.offer-tbl max-width:100%; @≤720px .top-nav flex-wrap.
HouseAnalyticsSection.tsx: unclassed flex-ребёнок с PriceHistoryChart → min-width:0.
RecentSoldList.tsx + PlacementHistoryCard.tsx: raw-таблицы (не блок-стакаются) → overflow-x:auto — скролл ВНУТРИ карточки, не страницы.
Desktop-neutral: правила media-scoped / shrink-only.
Влит свежий forgejo/main (#703 dedupe last_scraped_at) — ветка была от 88a3ce1.

Test plan

npx tsc --noEmit → clean (после merge #703; дубль last_scraped_at был чужой, уже пофикшен).
LIVE playwright @390px: нет horizontal overflow на /trade-in/?id=...&brand=praktika (charts/map/tables/nav).

Closes #692

## Summary - #692 (P2): убран горизонтальный overflow страницы результата оценки на ≤390px. - Корни: recharts `ResponsiveContainer` (~766px) не зажимался, leaflet-тайлы, широкие comp-таблицы и `top-nav` выпирали — flex/grid-ребёнок с дефолтным `min-width:auto` не ужимался. ## Changes - `trade-in.css`: `html/body/.page` `overflow-x:clip` (страховка, не ломает sticky); `.result-col > *` `min-width:0`/`max-width:100%`; recharts-обёртки `max-width:100%`; leaflet MapCard + `table.dt`/`.offer-tbl` `max-width:100%`; `@≤720px` `.top-nav` `flex-wrap`. - `HouseAnalyticsSection.tsx`: unclassed flex-ребёнок с `PriceHistoryChart` → `min-width:0`. - `RecentSoldList.tsx` + `PlacementHistoryCard.tsx`: raw-таблицы (не блок-стакаются) → `overflow-x:auto` — скролл ВНУТРИ карточки, не страницы. - Desktop-neutral: правила media-scoped / shrink-only. - Влит свежий `forgejo/main` (#703 dedupe `last_scraped_at`) — ветка была от 88a3ce1. ## Test plan - [x] `npx tsc --noEmit` → clean (после merge #703; дубль `last_scraped_at` был чужой, уже пофикшен). - [ ] LIVE playwright @390px: нет horizontal overflow на /trade-in/?id=...&brand=praktika (charts/map/tables/nav). Closes #692

bot-backend added 1 commit 2026-05-30 08:39:50 +00:00

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

На вьюпортах ≤390px страница результата скроллилась вбок: recharts
ResponsiveContainer (~766px) не зажимался, leaflet-тайлы, широкие comp-таблицы
и top-nav выпирали — flex/grid-ребёнок с дефолтным min-width:auto не ужимался.

trade-in.css: html/body/.page overflow-x:clip (страховка, не ломает sticky);
.result-col>* min-width:0/max-width:100%; recharts-обёртки max-width:100%;
leaflet MapCard + comp-таблицы (table.dt/.offer-tbl) max-width:100%;
@≤720px top-nav flex-wrap. HouseAnalyticsSection (unclassed flex-ребёнок с
PriceHistoryChart) min-width:0. Raw-таблицы RecentSoldList/PlacementHistoryCard
(не блок-стакаются) — overflow-x:auto: скролл ВНУТРИ карточки, не страницы.
Desktop-neutral (media-scoped/shrink-only).

Closes #692

bot-reviewer approved these changes 2026-05-30 08:46:28 +00:00

bot-reviewer left a comment

Collaborator

Mobile horizontal-overflow guard (#692). Frontend CSS + 3 one-line wrappers. Sound and knowledgeable: overflow-x clip on html/body/.page (clip NOT hidden -> does not create a scroll container, so position:sticky keeps working ? correct subtle choice); min-width:0 + max-width:100% on flex children (classic min-width:auto overflow fix); overflowX:auto on wide tables (scroll inside card not page); recharts/Leaflet/table max-width:100% caps; <=720px top-nav flex-wrap. Rules are desktop-neutral (no-ops when content fits). Frontend-only, no hot/tripwire files, low regression risk. APPROVE.

Mobile horizontal-overflow guard (#692). Frontend CSS + 3 one-line wrappers. Sound and knowledgeable: overflow-x clip on html/body/.page (clip NOT hidden -> does not create a scroll container, so position:sticky keeps working ? correct subtle choice); min-width:0 + max-width:100% on flex children (classic min-width:auto overflow fix); overflowX:auto on wide tables (scroll inside card not page); recharts/Leaflet/table max-width:100% caps; <=720px top-nav flex-wrap. Rules are desktop-neutral (no-ops when content fits). Frontend-only, no hot/tripwire files, low regression risk. APPROVE.