Merge pull request 'fix(tradein): import trade-in.css в ui-preview (#801)' (#820) from fix/801-preview-css into main

Reviewed-on: #820

tradein-mvp/frontend/src/app/ui-preview/estimate/page.tsx

@@ -21,6 +21,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { notFound } from "next/navigation";
 import { useState } from "react";
 
+import "@/components/trade-in/trade-in.css";
 import { CianValuationCard } from "@/components/trade-in/CianValuationCard";
 import { DealsCard } from "@/components/trade-in/DealsCard";
 import { DistributionCard } from "@/components/trade-in/DistributionCard";
@@ -57,22 +58,23 @@ function PreviewContent() {
 
   return (
     <QueryClientProvider client={client}>
-      <main
-        className="tradein-results"
-        style={{ maxWidth: 920, margin: "0 auto", padding: 24 }}
-      >
-        <HeroSummary
-          estimate={FIXTURE_ESTIMATE}
-          input={FIXTURE_INPUT}
-          onResubmit={() => {}}
-          isResubmitting={false}
-        />
-        <CianValuationCard data={FIXTURE_ESTIMATE.cian_valuation} />
-        <DistributionCard estimate={FIXTURE_ESTIMATE} />
-        <DealsCard estimate={FIXTURE_ESTIMATE} />
-        <StreetDealsCard estimate={FIXTURE_ESTIMATE} />
-        <ExposureCard estimate={FIXTURE_ESTIMATE} />
-        <PriceTrendCard estimate={FIXTURE_ESTIMATE} />
+      {/* Те же layout-классы, что у реальной страницы (page.tsx): .page → .result-col
+          (flex-column gap, --container ширина). Без них карточки рендерились узко/«мобильно». */}
+      <main className="page">
+        <section className="result-col">
+          <HeroSummary
+            estimate={FIXTURE_ESTIMATE}
+            input={FIXTURE_INPUT}
+            onResubmit={() => {}}
+            isResubmitting={false}
+          />
+          <CianValuationCard data={FIXTURE_ESTIMATE.cian_valuation} />
+          <DistributionCard estimate={FIXTURE_ESTIMATE} />
+          <DealsCard estimate={FIXTURE_ESTIMATE} />
+          <StreetDealsCard estimate={FIXTURE_ESTIMATE} />
+          <ExposureCard estimate={FIXTURE_ESTIMATE} />
+          <PriceTrendCard estimate={FIXTURE_ESTIMATE} />
+        </section>
       </main>
     </QueryClientProvider>
   );