From ceaf553eb74dc3ca755d24b3a45b7deb0a25a72f Mon Sep 17 00:00:00 2001
From: lekss361 <claudestars@proton.me>
Date: Mon, 11 May 2026 17:53:35 +0300
Subject: [PATCH] =?UTF-8?q?fix(analytics):=20recommend=20page=20UI=20?=
 =?UTF-8?q?=E2=80=94=20caveat=20badge=20wrap=20+=20headline=20baseline=20l?=
 =?UTF-8?q?abel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two UX nits:
- Caveats badge had whiteSpace:nowrap on a 250-char data_caveat → overflowed
  visibly outside the section in the screenshot. Drop nowrap, keep small
  font + light grey background. Reads as a compact note.
- Headline KPIs (369 млн ₽ · 19.4 мес · темп 6.0 · ликв 97/100) are
  computed by backend at price_factor=1.0, while live KPI cards below
  recompute with the current slider position. When user moves price to
  +40% the discrepancy is confusing. Append small grey '(базовая цена)'
  marker after headline with a tooltip explaining baseline vs live.
---
 frontend/src/app/analytics/recommend/page.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/analytics/recommend/page.tsx b/frontend/src/app/analytics/recommend/page.tsx
index 913dccc4..4a50d5d6 100644
--- a/frontend/src/app/analytics/recommend/page.tsx
+++ b/frontend/src/app/analytics/recommend/page.tsx
@@ -162,6 +162,18 @@ export default function RecommendPage() {
                       ? ` · ${input.area_total_m2.toLocaleString("ru")} м²`
                       : ""}
                     <strong>»:</strong> {data.summary.headline}
+                    <span
+                      style={{
+                        marginLeft: 8,
+                        fontSize: 11,
+                        color: "#94a3b8",
+                        fontWeight: 400,
+                        whiteSpace: "nowrap",
+                      }}
+                      title="Базовый расчёт — без movements слайдером. KPI ниже live по ползунку цены."
+                    >
+                      (базовая цена)
+                    </span>
                   </div>
                   <div
                     style={{
@@ -358,13 +370,13 @@ export default function RecommendPage() {
                     <span
                       style={{
                         display: "inline-block",
-                        padding: "3px 8px",
+                        padding: "4px 10px",
                         background: "#f1f5f9",
                         border: "1px solid #e2e8f0",
-                        borderRadius: 4,
+                        borderRadius: 6,
                         fontSize: 11,
                         color: "#5b6066",
-                        whiteSpace: "nowrap",
+                        lineHeight: 1.4,
                       }}
                     >
                       {data.scope.data_caveat ??