fix(tradein/v2): mobile layout — remove overflow floor + honest stacked mobile block (#2275) #2389

Merged

lekss361 merged 1 commit from fix/tradein-v2-mobile-layout into main

2026-07-04 07:02:56 +00:00

lekss361 commented

2026-07-04 07:00:17 +00:00

Owner

Summary

Root cause: scale-to-fit формула имела floor 0.88, который убивал fit на вьюпортах уже ~1350px — артборд 1536px рендерился шире экрана на любом узком вьюпорте. Убран floor + height-ratio: scale = Math.min(1, innerWidth/1536) — артборд никогда не шире вьюпорта.
Добавлен честный fluid mobile-блок (compact HeroBar + ObjectSummary) над (по-прежнему масштабируемым) артбордом на вьюпортах <768px вместо нечитаемого мелкого текста внутри transform. HeroBar получил compact prop; desktop-путь не изменён.
Review fixup (critical): внешний return был голым <> Fragment — на мобильных два корневых потомка (quick-view блок + артборд) становились siblings родительского row-flex контейнера (layout.tsx) и укладывались бок о бок вместо стека. Обёрнуто в единый flex-column div, восстанавливающий контракт «один flex-child, центрирован», который ожидает layout.tsx.

Test plan

tsc --noEmit чисто (до и после rebase на актуальный main)
next build проходит
Живая проверка на 390px: т.к. shared browser session — реальное окно пользователя (resize viewport не применяется), внедрён iframe с собственным window.innerWidth≈390 внутри текущей вкладки → scrollWidth === clientWidth === innerWidth (387px), zero horizontal overflow. Консольные ошибки — только pre-existing /api/v1/me 500 (нет backend в dev-инстансе), не layout.
code-review: ❌MAJOR (Fragment/flex bug) → пофикшено + живьём переверифицировано

Follow-up (не в scope)

ParamsPanel/ResultPanel/TopNav/оверлеи ещё без честной mobile-раскладки — по-прежнему внутри масштабируемого артборда (мельче на телефонах, но больше не переполняет). Требует отдельного issue если продукт должен быть полноценно юзабелен с телефона, не только "не ломается".

Refs #2275

## Summary - **Root cause**: scale-to-fit формула имела floor `0.88`, который убивал fit на вьюпортах уже ~1350px — артборд 1536px рендерился шире экрана на любом узком вьюпорте. Убран floor + height-ratio: `scale = Math.min(1, innerWidth/1536)` — артборд никогда не шире вьюпорта. - Добавлен честный fluid mobile-блок (compact `HeroBar` + `ObjectSummary`) над (по-прежнему масштабируемым) артбордом на вьюпортах <768px вместо нечитаемого мелкого текста внутри transform. `HeroBar` получил `compact` prop; desktop-путь не изменён. - **Review fixup (critical)**: внешний return был голым `<>` Fragment — на мобильных два корневых потомка (quick-view блок + артборд) становились siblings родительского row-flex контейнера (`layout.tsx`) и укладывались бок о бок вместо стека. Обёрнуто в единый flex-column div, восстанавливающий контракт «один flex-child, центрирован», который ожидает `layout.tsx`. ## Test plan - [x] `tsc --noEmit` чисто (до и после rebase на актуальный main) - [x] `next build` проходит - [x] **Живая проверка на 390px**: т.к. shared browser session — реальное окно пользователя (resize viewport не применяется), внедрён iframe с собственным `window.innerWidth≈390` внутри текущей вкладки → `scrollWidth === clientWidth === innerWidth` (387px), **zero horizontal overflow**. Консольные ошибки — только pre-existing `/api/v1/me` 500 (нет backend в dev-инстансе), не layout. - [x] code-review: ❌MAJOR (Fragment/flex bug) → пофикшено + живьём переверифицировано ## Follow-up (не в scope) `ParamsPanel`/`ResultPanel`/`TopNav`/оверлеи ещё без честной mobile-раскладки — по-прежнему внутри масштабируемого артборда (мельче на телефонах, но больше не переполняет). Требует отдельного issue если продукт должен быть полноценно юзабелен с телефона, не только "не ломается". Refs #2275

lekss361 added 1 commit 2026-07-04 07:00:18 +00:00

fix(tradein/v2): mobile layout — remove overflow floor + honest stacked mobile block (#2275 )

CI / changes (pull_request) Successful in 12s

Details

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

Details

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

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 1m8s

Details

4055bde378

Root cause: scale-to-fit formula had a 0.88 floor that defeated the fit
on viewports narrower than ~1350px, so the 1536px-wide artboard always
rendered wider than the screen. Removed the floor + height-ratio term:
scale is now purely innerWidth/1536 clamped to 1, so the artboard never
exceeds viewport width.

Added an honest fluid mobile block (HeroBar compact + ObjectSummary)
rendered above the (still-scaled) artboard on viewports <768px, instead
of illegible tiny text inside the transform. HeroBar gained a `compact`
prop for the column layout; default (desktop) path unchanged.

Review fixup: the outer return was a bare Fragment, so on mobile its two
root children (quick-view block + artboard) became siblings of
layout.tsx's row-direction flex container and laid out side-by-side
instead of stacked. Wrapped in a single flex-column div to restore the
"one flex child, centered" contract layout.tsx expects.

Verified live: injected an iframe (window.innerWidth genuinely 390-ish,
since the shared browser session's own viewport can't be resized) —
scrollWidth === clientWidth === innerWidth, zero horizontal overflow.
Console errors are pre-existing /api/v1/me 500s (no backend in this
dev instance), not layout-related.

Follow-up (not in scope): ParamsPanel/ResultPanel/TopNav/overlays have
no dedicated mobile layout yet — still inside the scaled artboard,
smaller on phones but no longer overflowing.