Merge pull request 'fix(tradein): praktika wordmark logo + form button cutoff on short viewports' (#942) from fix/tradein-praktika-logo-form-scroll into main

Reviewed-on: #942

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;

tradein-mvp/frontend/public/brands/praktika.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1498 194" fill="none" role="img" aria-label="Практика"><path d="M1497.3 80.77h-79.53l-32.75 112.282h23.38l88.9-112.282z" fill="#FF5BBA"/><path d="M1279.34 139.779c-22.35 0-59.83-5.658-59.83-43.524 0-34.767 39.58-42.067 72.78-42.067h40.58V51.01c0-17.81-14.88-21.467-37.23-21.467-15.95 0-51.49 3.906-61.53 5.037V5.704C1242.28 4.479 1274.05 0 1299.36 0c25.31 0 42.35 4.805 54.45 14.306 12.09 9.487 17.97 22.243 17.97 38.998v83.731h-15.72l-18.18-23.312-1.58 3.627c-2.7 6.2-8.71 11.517-17.87 15.81-9.4 4.402-22.55 6.634-39.09 6.634v-.015zm12.13-63.147c-8.17 0-33.04 0-33.04 18.243 0 8.37 5 18.352 28.81 18.352 12.4 0 22.76-2.666 30.75-7.936 7.92-5.208 14.88-17.5 14.88-26.319v-2.356h-41.4v.016zM113.367 136.911V32.101H38.905v104.81H0V3.642h152.272v133.269h-38.905zM1170.91 137.035l-41.52-52.452h-36.94v52.452h-38.92V3.642h38.92v52.452h36.94l41.52-52.452h41.98L1160.1 70.34l52.79 66.696h-41.98zM178.73 193.052V3.642h15.717l18.182 23.312 1.581-3.627c2.697-6.2 8.711-11.516 17.871-15.81 8.727-4.092 25.327-6.634 43.322-6.634 45.369 0 69.363 23.855 69.363 69.006 0 69.89-52.204 69.89-69.363 69.89-17.995 0-34.595-2.542-43.322-6.634-4.185-1.953-7.75-4.154-10.602-6.526l-3.859-3.208v69.641h-38.905.015zm85.839-163.649c-21.467 0-40.687 9.424-46.732 22.94l-.186.419v.45c-.14 2.96-.248 14.12-.233 17.111 0 3.085.093 14.54.217 17.515l.031.636.341.542c9.486 14.756 25.591 23.235 44.19 23.235 9.285 0 18.693-2.139 27.203-6.185 14.477-7.486 17.484-23.575 17.453-35.758.031-12.168-2.961-28.257-17.376-35.712-7.161-3.41-15.748-5.193-24.893-5.193h-.015zM417.833 139.779c-22.351 0-59.83-5.658-59.83-43.524 0-34.767 39.587-42.067 72.788-42.067h40.579V51.01c0-17.81-14.88-21.467-37.231-21.467-15.95 0-51.491 3.906-61.535 5.037V5.704C380.772 4.479 412.547 0 437.859 0c25.311 0 42.346 4.805 54.436 14.306 12.089 9.487 17.964 22.243 17.964 38.998v83.731h-15.717l-18.181-23.312-1.581 3.627c-2.697 6.2-8.711 11.517-17.872 15.81-9.393 4.402-22.552 6.634-39.091 6.634l.016-.015zm12.136-63.147c-8.168 0-33.046 0-33.046 18.243 0 8.37 5.007 18.352 28.815 18.352 12.4 0 22.754-2.666 30.752-7.936 7.92-5.208 14.88-17.5 14.88-26.319v-2.356h-41.401v.016zM654.114 137.035L612.59 84.583h-36.952v52.452h-38.905V3.642h38.905v52.452h36.952l41.524-52.452h41.974L643.295 70.34l52.793 66.696h-41.974zM760.041 136.911V32.101h-57.334l8.199-28.459h144.072V32.1h-56.032v104.811h-38.905zM984.992 3.751l-71.408 90.504V3.642h-38.781v133.269h42.904l70.602-89.45v89.45h38.781V3.642l-42.098.109z" fill="#2C3133"/></svg>

tradein-mvp/frontend/src/components/trade-in/Topbar.tsx

@@ -103,20 +103,22 @@ export function Topbar({ active }: TopbarProps) {
       <div className="topbar-inner">
         <div className="brand">
           {brand ? (
-            <>
-              {/* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766).
-                  Невалидный URL → fallback на TI-марку, без broken/опасного img. */}
-              {safeUrl(brand.logo_url) ? (
-                <img
-                  src={safeUrl(brand.logo_url) as string}
-                  alt={brand.name}
-                  className="brand-logo"
-                />
-              ) : (
+            /* logo_url из бренд-конфига → safeUrl (блок javascript:/data: схем, #766).
+               Брендовый логотип — полноразмерный wordmark (содержит название), поэтому
+               отдельный brand-product текст НЕ рендерим, иначе дубль («ПРАКТИКА» ×2).
+               Невалидный/пустой URL → fallback TI-марка + текстовое название бренда. */
+            safeUrl(brand.logo_url) ? (
+              <img
+                src={safeUrl(brand.logo_url) as string}
+                alt={brand.name}
+                className="brand-logo"
+              />
+            ) : (
+              <>
                 <span className="brand-mark">TI</span>
-              )}
-              <span className="brand-product">{brand.name}</span>
-            </>
+                <span className="brand-product">{brand.name}</span>
+              </>
+            )
           ) : (
             <>
               <span className="brand-mark">TI</span>

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;