fix(tradein): praktika wordmark logo + form button cutoff on short viewports #942

Merged

lekss361 merged 1 commit from fix/tradein-praktika-logo-form-scroll into main

2026-06-01 07:18:50 +00:00

lekss361 commented

2026-06-01 07:16:55 +00:00

Owner

Два UI-фикса trade-in перед выдачей доступа клиенту «Практика». Оба проверены вживую на проде (gendsgn.ru/trade-in, Playwright).

1. Логотип «Практики» «поехал» (расплющен в полоску)

Причина: brands.logo_url хотлинкал gk-praktika.ru/images/logo/logo-pink.svg — это квадратный розовый знак (viewBox 0 0 69 69, preserveAspectRatio="none", без width/height). Браузер брал дефолт-бокс 300×150, CSS height:24/width:auto не выводил ширину из viewBox → рендер 300×24, знак растянут.

Фикс:

Self-host полного wordmark «ПРАКТИКА» (символ #i-logo-new из спрайта клиента, viewBox 1498×194) → frontend/public/brands/praktika.svg.
Миграция 099_brand_praktika_logo_wordmark.sql перенаправляет brands.logo_url → https://gendsgn.ru/trade-in/brands/praktika.svg (идемпотентный UPDATE).
Topbar.tsx: при брендовом логотипе рендерим только wordmark (он уже содержит название) — убран дублирующий текст «ПРАКТИКА ×2». Fallback (бренд без лого / generic) не тронут, safeUrl XSS-guard сохранён.
.brand-logo усилен object-fit:contain + max-width — защита от расплющивания для любого SVG.

2. Кнопка «Оценить квартиру» обрезается @100% на 13″ MacBook

Причина: .form-card { max-height: calc(100vh-104px); overflow:hidden } (flex-column); на коротком вьюпорте flex-shrink тела не срабатывал → .form-foot с кнопкой выдавливался за границу и обрезался. На 80% всё влезало → кнопка появлялась.

Фикс: скроллом владеет карточка целиком — .form-card { overflow-y:auto; overflow-x:hidden }, .form-body { overflow-y:visible }, .form-foot { flex-shrink:0 }. Проверено на 1280×720: кнопка достижима скроллом.

Проверка

Логотип: SVG валиден (well-formed, только <path>, без <script>), рендерится ~200×26 без искажений.
Скролл: воспроизвёл обрезку на 1280×720 (btnBelowCardClip:true), после фикса canReachButton.visible:true.
Pre-commit hooks passed. Pre-push code-reviewer → ✅ approve.

Известный trade-off (не блокер)

PDF-экспорт (trade_in_pdf.py) имеет allowlist доменов логотипа (gk-praktika.ru), куда gendsgn.ru не входит → в PDF логотип заменится текстом названия (graceful, без ошибки). Демо для «Практики» — браузерное; PDF-логотип закрою отдельным follow-up (добавить gendsgn.ru в _ALLOWED_LOGO_CDN).

После merge — deploy-tradein.yml применит миграцию 099 на прод и пересоберёт фронт с новым ассетом.

Два UI-фикса trade-in перед выдачей доступа клиенту «Практика». Оба проверены вживую на проде (`gendsgn.ru/trade-in`, Playwright). ## 1. Логотип «Практики» «поехал» (расплющен в полоску) **Причина:** `brands.logo_url` хотлинкал `gk-praktika.ru/images/logo/logo-pink.svg` — это квадратный розовый знак (`viewBox 0 0 69 69`, `preserveAspectRatio="none"`, без `width/height`). Браузер брал дефолт-бокс 300×150, CSS `height:24/width:auto` не выводил ширину из viewBox → рендер 300×24, знак растянут. **Фикс:** - Self-host полного wordmark «ПРАКТИКА» (символ `#i-logo-new` из спрайта клиента, `viewBox 1498×194`) → `frontend/public/brands/praktika.svg`. - Миграция `099_brand_praktika_logo_wordmark.sql` перенаправляет `brands.logo_url` → `https://gendsgn.ru/trade-in/brands/praktika.svg` (идемпотентный UPDATE). - `Topbar.tsx`: при брендовом логотипе рендерим только wordmark (он уже содержит название) — убран дублирующий текст «ПРАКТИКА ×2». Fallback (бренд без лого / generic) не тронут, `safeUrl` XSS-guard сохранён. - `.brand-logo` усилен `object-fit:contain` + `max-width` — защита от расплющивания для любого SVG. ## 2. Кнопка «Оценить квартиру» обрезается @100% на 13″ MacBook **Причина:** `.form-card { max-height: calc(100vh-104px); overflow:hidden }` (flex-column); на коротком вьюпорте flex-shrink тела не срабатывал → `.form-foot` с кнопкой выдавливался за границу и обрезался. На 80% всё влезало → кнопка появлялась. **Фикс:** скроллом владеет карточка целиком — `.form-card { overflow-y:auto; overflow-x:hidden }`, `.form-body { overflow-y:visible }`, `.form-foot { flex-shrink:0 }`. Проверено на 1280×720: кнопка достижима скроллом. ## Проверка - Логотип: SVG валиден (well-formed, только `<path>`, без `<script>`), рендерится ~200×26 без искажений. - Скролл: воспроизвёл обрезку на 1280×720 (`btnBelowCardClip:true`), после фикса `canReachButton.visible:true`. - Pre-commit hooks passed. Pre-push `code-reviewer` → ✅ approve. ## Известный trade-off (не блокер) PDF-экспорт (`trade_in_pdf.py`) имеет allowlist доменов логотипа (`gk-praktika.ru`), куда `gendsgn.ru` не входит → в PDF логотип заменится текстом названия (graceful, без ошибки). Демо для «Практики» — браузерное; PDF-логотип закрою отдельным follow-up (добавить `gendsgn.ru` в `_ALLOWED_LOGO_CDN`). После merge — `deploy-tradein.yml` применит миграцию 099 на прод и пересоберёт фронт с новым ассетом.

lekss361 added 1 commit 2026-06-01 07:16:56 +00:00

fix(tradein): praktika wordmark logo + form button cutoff on short viewports ed15559f80

Logo «поехало»: brands.logo_url хотлинкал квадратный знак logo-pink.svg
(viewBox 69×69, preserveAspectRatio=none, без width/height) → CSS height:24/width:auto
рендерил его 300×24 расплющенным. Self-host полного wordmark (символ #i-logo-new,
viewBox 1498×194) в /trade-in/brands/praktika.svg; миграция 099 перенаправляет
brands.logo_url; Topbar рендерит только wordmark (убран дублирующий текст-название);
.brand-logo защищён object-fit:contain + max-width.

Кнопка «Оценить» обрезалась @100% на 13" MacBook: .form-card max-height+overflow:hidden
выдавливал .form-foot когда flex-shrink тела не срабатывал. Теперь скроллом владеет
карточка (overflow-y:auto), body overflow-y:visible, foot flex-shrink:0.
Проверено вживую на проде 1280×720.