From ed15559f80e99e15f4afb8bd23001222a9c2a66d Mon Sep 17 00:00:00 2001 From: bot-backend Date: Mon, 1 Jun 2026 10:15:49 +0300 Subject: [PATCH] fix(tradein): praktika wordmark logo + form button cutoff on short viewports MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../sql/099_brand_praktika_logo_wordmark.sql | 24 ++++++++++++++++ .../frontend/public/brands/praktika.svg | 1 + .../src/components/trade-in/Topbar.tsx | 28 ++++++++++--------- .../src/components/trade-in/trade-in.css | 27 +++++++++++++++--- 4 files changed, 63 insertions(+), 17 deletions(-) create mode 100644 tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql create mode 100644 tradein-mvp/frontend/public/brands/praktika.svg diff --git a/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql b/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql new file mode 100644 index 00000000..097fd76e --- /dev/null +++ b/tradein-mvp/backend/data/sql/099_brand_praktika_logo_wordmark.sql @@ -0,0 +1,24 @@ +-- 099_brand_praktika_logo_wordmark.sql +-- Fix: логотип «Практики» в шапке trade-in «поехал» (расплющен в полоску). +-- +-- ПРИЧИНА: logo_url хотлинкал `https://gk-praktika.ru/images/logo/logo-pink.svg` — +-- это розовый КВАДРАТ-знак (viewBox 0 0 69 69) с `preserveAspectRatio="none"` и +-- без width/height. Браузер берёт дефолт-бокс 300×150, CSS даёт height:24/width:auto, +-- width не выводится из viewBox → бокс 300×24 → квадрат растянут в полоску. +-- +-- ФИКС: self-host полноразмерного wordmark «ПРАКТИКА» (символ #i-logo-new из спрайта +-- клиента, viewBox 1498×194, нормальное соотношение) в +-- frontend/public/brands/praktika.svg → отдаётся на /trade-in/brands/praktika.svg. +-- Шапка теперь рендерит wordmark целиком (Topbar убирает дублирующий текст-название). +-- +-- Идемпотентно: UPDATE по PK slug='praktika'. Безопасно ре-применять. +-- +-- NUMBERING: highest на main = 098 → 099. + +BEGIN; + +UPDATE brands +SET logo_url = 'https://gendsgn.ru/trade-in/brands/praktika.svg' +WHERE slug = 'praktika'; + +COMMIT; diff --git a/tradein-mvp/frontend/public/brands/praktika.svg b/tradein-mvp/frontend/public/brands/praktika.svg new file mode 100644 index 00000000..a452e484 --- /dev/null +++ b/tradein-mvp/frontend/public/brands/praktika.svg @@ -0,0 +1 @@ + diff --git a/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx b/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx index 2bddee8c..6260d8ed 100644 --- a/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx +++ b/tradein-mvp/frontend/src/components/trade-in/Topbar.tsx @@ -103,20 +103,22 @@ export function Topbar({ active }: TopbarProps) {
{brand ? ( - <> - {/* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766). - Невалидный URL → fallback на TI-марку, без broken/опасного img. */} - {safeUrl(brand.logo_url) ? ( - {brand.name} - ) : ( + /* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766). + Брендовый логотип — полноразмерный wordmark (содержит название), поэтому + отдельный brand-product текст НЕ рендерим, иначе дубль («ПРАКТИКА» ×2). + Невалидный/пустой URL → fallback TI-марка + текстовое название бренда. */ + safeUrl(brand.logo_url) ? ( + {brand.name} + ) : ( + <> TI - )} - {brand.name} - + {brand.name} + + ) ) : ( <> TI diff --git a/tradein-mvp/frontend/src/components/trade-in/trade-in.css b/tradein-mvp/frontend/src/components/trade-in/trade-in.css index 4f6c1a4f..7384e270 100644 --- a/tradein-mvp/frontend/src/components/trade-in/trade-in.css +++ b/tradein-mvp/frontend/src/components/trade-in/trade-in.css @@ -114,8 +114,18 @@ color: var(--muted); text-transform: uppercase; } - /* #657 white-label: логотип клиента вместо «TI»-метки (см. Topbar.tsx) */ - .brand-logo { height: 24px; width: auto; display: block; } + /* #657 white-label: логотип клиента вместо «TI»-метки (см. Topbar.tsx). + object-fit:contain + max-width — защита от расплющивания, если у бренда SVG + без нормального viewBox/с preserveAspectRatio="none" (как был хотлинк + logo-pink.svg). Полноразмерный wordmark (viewBox 1498×194) рендерится ~200×26. */ + .brand-logo { + height: 26px; + width: auto; + max-width: 200px; + object-fit: contain; + object-position: left center; + display: block; + } /* Активный бренд: переопределяем шрифт всего trade-in scope на Manrope. --accent / --accent-2 переопределяются в рантайме из page.tsx (document.documentElement.style.setProperty). Без ?brand= класс не @@ -231,7 +241,12 @@ border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); max-height: calc(100vh - 104px); - overflow: hidden; + /* overflow-y:auto (было hidden) — на коротких вьюпортах (13" MacBook @100%) + форма выше max-height; flex-shrink тела внутри max-height-контейнера не + срабатывает, и кнопка «Оценить» в .form-foot выдавливалась за границу и + обрезалась. Скролл на самой карточке делает кнопку всегда доступной. */ + overflow-y: auto; + overflow-x: hidden; display: flex; flex-direction: column; } @@ -253,7 +268,9 @@ } .form-body { padding: 16px 18px 8px; - overflow-y: auto; + /* overflow-y:visible — скроллом владеет .form-card целиком (см. выше); вложенный + auto-скролл тут не нужен (flex-shrink тела в max-height-контейнере не работал). */ + overflow-y: visible; flex: 1; } .field { margin-bottom: 12px; } @@ -357,6 +374,8 @@ padding: 12px 18px 16px; border-top: 1px solid var(--border); background: linear-gradient(to bottom, transparent, color-mix(in oklch, var(--surface-2) 60%, transparent) 40%); + /* flex-shrink:0 — футер с кнопкой «Оценить» не сжимается при скролле карточки. */ + flex-shrink: 0; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;