fix(tradein-ui): eliminate mobile horizontal overflow on estimate result (#692) (#705)
All checks were successful
Deploy Trade-In / changes (push) Successful in 4s
Deploy Trade-In / test (push) Has been skipped
Deploy Trade-In / build-backend (push) Has been skipped
Deploy Trade-In / deploy (push) Successful in 34s
Deploy Trade-In / build-frontend (push) Successful in 1m34s
All checks were successful
Deploy Trade-In / changes (push) Successful in 4s
Deploy Trade-In / test (push) Has been skipped
Deploy Trade-In / build-backend (push) Has been skipped
Deploy Trade-In / deploy (push) Successful in 34s
Deploy Trade-In / build-frontend (push) Successful in 1m34s
Co-authored-by: bot-backend <bot-backend@gendsgn.local> Co-committed-by: bot-backend <bot-backend@gendsgn.local>
This commit is contained in:
parent
690d423c5a
commit
96de6d8e58
4 changed files with 42 additions and 3 deletions
|
|
@ -15,7 +15,7 @@ export function HouseAnalyticsSection({ estimateId }: Props) {
|
||||||
if (data.kpi.total_lots === 0) return null;
|
if (data.kpi.total_lots === 0) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section style={{ marginTop: 16 }}>
|
<section style={{ marginTop: 16, minWidth: 0, maxWidth: "100%" }}>
|
||||||
<header
|
<header
|
||||||
style={{
|
style={{
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
|
|
|
||||||
|
|
@ -44,7 +44,7 @@ export function PlacementHistoryCard({ estimateId }: Props) {
|
||||||
{items.length} лот{items.length === 1 ? "" : "ов"}
|
{items.length} лот{items.length === 1 ? "" : "ов"}
|
||||||
</small>
|
</small>
|
||||||
</header>
|
</header>
|
||||||
<div style={{ padding: "8px 16px 16px" }}>
|
<div style={{ padding: "8px 16px 16px", overflowX: "auto" }}>
|
||||||
<table
|
<table
|
||||||
style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
|
style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,7 @@ export function RecentSoldList({ items }: Props) {
|
||||||
{items.length} лот{suffix}
|
{items.length} лот{suffix}
|
||||||
</small>
|
</small>
|
||||||
</header>
|
</header>
|
||||||
<div style={{ padding: "8px 16px 16px" }}>
|
<div style={{ padding: "8px 16px 16px", overflowX: "auto" }}>
|
||||||
<table
|
<table
|
||||||
style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
|
style={{ width: "100%", fontSize: 13, borderCollapse: "collapse" }}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -2215,3 +2215,42 @@
|
||||||
.whatif-row { grid-template-columns: 1fr; }
|
.whatif-row { grid-template-columns: 1fr; }
|
||||||
}
|
}
|
||||||
@keyframes ti-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
@keyframes ti-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||||||
|
|
||||||
|
/* ============================================================
|
||||||
|
#692 — Mobile horizontal-overflow guard (≤390px)
|
||||||
|
Root causes: recharts ResponsiveContainer / Leaflet tiles /
|
||||||
|
wide comp-tables / top-nav, все push width когда flex/grid
|
||||||
|
ребёнок имеет дефолтный min-width:auto и не может ужаться.
|
||||||
|
Эти правила desktop-neutral: на ≥1100px ничего не меняют
|
||||||
|
(layout уже single-col и контент влезает), только страхуют
|
||||||
|
узкие вьюпорты от бокового скролла страницы.
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
/* Последняя линия обороны: страница никогда не скроллится вбок.
|
||||||
|
clip (не hidden) — не создаёт scroll-container, не ломает sticky. */
|
||||||
|
html, body { overflow-x: clip; }
|
||||||
|
.page { max-width: 100%; overflow-x: clip; }
|
||||||
|
|
||||||
|
/* Каждая прямая карточка/секция результат-колонки должна уметь
|
||||||
|
ужиматься (flex-ребёнок по умолчанию min-width:auto). .result-col
|
||||||
|
уже min-width:0; добавляем то же его детям + клип переполнения. */
|
||||||
|
.result-col > * { min-width: 0; max-width: 100%; }
|
||||||
|
|
||||||
|
/* Recharts: контейнер графика всегда 100% ширины родителя и
|
||||||
|
не шире её — ResponsiveContainer мерит этот box. */
|
||||||
|
.recharts-responsive-container,
|
||||||
|
.recharts-wrapper { max-width: 100%; }
|
||||||
|
|
||||||
|
/* Leaflet-обёртка карты (MapCard) — не даём тайлам растянуть карточку. */
|
||||||
|
.card > [aria-label="Карта аналогов и сделок"] { max-width: 100%; }
|
||||||
|
|
||||||
|
/* Comp/analog-таблицы со «склейкой» listing-ячейки шире остального:
|
||||||
|
на узких вьюпортах горизонтальный скролл ВНУТРИ карточки, не страницы. */
|
||||||
|
.card > table.dt,
|
||||||
|
.card > table.offer-tbl { max-width: 100%; }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
/* Topbar: nav переносится и не выпирает за ширину бара. */
|
||||||
|
.top-nav { flex-wrap: wrap; min-width: 0; margin-left: auto; }
|
||||||
|
.topbar-inner { max-width: 100%; }
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue