From 702f322b22b3f0fed0ef9886e2a32417dc06b6b6 Mon Sep 17 00:00:00 2001
From: bot-backend <bot-backend@gendsgn.local>
Date: Mon, 1 Jun 2026 10:58:43 +0300
Subject: [PATCH] fix(tradein): collapse CRM block + density so form fits
 laptops
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Форма ввода (10 полей + CRM-блок 221px) не помещалась в .form-card
(max-height 100vh-104px) на ноутбуках: переполнение 58px @1440×900,
~158px @13" MacBook. CRM «для менеджера» теперь сворачиваемый (по умолчанию
закрыт, открывается по клику) + лёгкое уплотнение отступов (.field 12→9,
form-body/foot padding). Высота формы 854→646px → влезает без скролла на
1366×768 / 1440×900 / 13" MacBook @100%. Sub-720 — fallback на скролл-фикс
из этой же ветки. Проверено вживую (injection) на проде, tsc --noEmit clean.
---
 .../src/components/trade-in/EstimateForm.tsx  | 24 ++++++++++++++++---
 .../src/components/trade-in/trade-in.css      |  7 +++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/tradein-mvp/frontend/src/components/trade-in/EstimateForm.tsx b/tradein-mvp/frontend/src/components/trade-in/EstimateForm.tsx
index 59f5074a..d84ae807 100644
--- a/tradein-mvp/frontend/src/components/trade-in/EstimateForm.tsx
+++ b/tradein-mvp/frontend/src/components/trade-in/EstimateForm.tsx
@@ -105,6 +105,9 @@ export function EstimateForm({
   const [form, setForm] = useState<FormState>(INITIAL);
   const [touched, setTouched] = useState(false);
   const [mapOpen, setMapOpen] = useState(false);
+  // CRM-блок свёрнут по умолчанию — экономит ~190px высоты, чтобы форма влезала
+  // на ноутбуки без скролла (поля для менеджера опциональны, открываются по клику).
+  const [crmOpen, setCrmOpen] = useState(false);
   const valError = validate(form);
   const canSubmit = !valError && !isPending && !blocked;
 
@@ -328,11 +331,24 @@ export function EstimateForm({
           </label>
         </div>
 
-        {/* CRM — для менеджера (#395) */}
+        {/* CRM — для менеджера (#395) — сворачиваемый, по умолчанию закрыт */}
         <div style={{ borderTop: "1px solid var(--border, #e5e5e5)", paddingTop: 14, marginTop: 4 }}>
-          <div style={{ marginBottom: 10, fontSize: 11, fontWeight: 600, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.4 }}>
+          <button
+            type="button"
+            onClick={() => setCrmOpen((v) => !v)}
+            aria-expanded={crmOpen}
+            style={{ width: "100%", display: "flex", alignItems: "center", gap: 6, marginBottom: crmOpen ? 10 : 0, padding: 0, background: "none", border: "none", cursor: "pointer", fontSize: 11, fontWeight: 600, color: "var(--muted)", textTransform: "uppercase", letterSpacing: 0.4 }}
+          >
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ transform: crmOpen ? "rotate(90deg)" : "none", transition: "transform .12s" }}>
+              <polyline points="9 6 15 12 9 18" />
+            </svg>
             CRM — для менеджера
-          </div>
+            <span style={{ marginLeft: "auto", fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>
+              {crmOpen ? "скрыть" : "опц."}
+            </span>
+          </button>
+          {crmOpen && (
+          <>
           <div className="field">
             <label className="field-label" htmlFor="ownership">
               Тип собственности <span className="hint">опц.</span>
@@ -383,6 +399,8 @@ export function EstimateForm({
               />
             </div>
           </div>
+          </>
+          )}
         </div>
 
         {touched && valError && (
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 7384e270..ad228826 100644
--- a/tradein-mvp/frontend/src/components/trade-in/trade-in.css
+++ b/tradein-mvp/frontend/src/components/trade-in/trade-in.css
@@ -267,13 +267,14 @@
       letter-spacing: 0.08em;
     }
     .form-body {
-      padding: 16px 18px 8px;
+      padding: 14px 18px 6px;
       /* overflow-y:visible — скроллом владеет .form-card целиком (см. выше); вложенный
          auto-скролл тут не нужен (flex-shrink тела в max-height-контейнере не работал). */
       overflow-y: visible;
       flex: 1;
     }
-    .field { margin-bottom: 12px; }
+    /* margin-bottom 12→9 — лёгкое уплотнение, чтобы форма помещалась на ноутбуках. */
+    .field { margin-bottom: 9px; }
     .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
     .field-row.triple { grid-template-columns: 1fr 1fr 1fr; }
     label.field-label {
@@ -371,7 +372,7 @@
     }
     .file-drop b { color: var(--fg-2); font-weight: 500; }
     .form-foot {
-      padding: 12px 18px 16px;
+      padding: 10px 18px 12px;
       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 — футер с кнопкой «Оценить» не сжимается при скролле карточки. */
-- 
2.45.3