From 700ad508d800b6d632acfa1055f66824d7bafbe8 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sun, 18 Oct 2026 14:57:22 +0700
Subject: [PATCH] =?UTF-8?q?fix(design-preview):=20=D0=BF=D1=80=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D1=80=D0=B5=D0=B2=D1=8C=D1=8E=20?=
 =?UTF-8?q?=E2=80=94=20=D0=BF=D0=BE=D1=80=D0=BE=D0=B3=D0=B8,=20=D0=B2?=
 =?UTF-8?q?=D1=8B=D1=81=D0=BE=D1=82=D1=8B=20=D0=B2=D0=BA=D0=BB=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=BA,=20=D0=BA=D0=BE=D0=BD=D1=82=D1=80=D0=B0=D1=81?=
 =?UTF-8?q?=D1=82=20=D1=84=D0=BE=D0=BA=D1=83=D1=81=D0=B0,=20=D1=81=D1=87?=
 =?UTF-8?q?=D1=91=D1=82=D1=87=D0=B8=D0=BA=20=D0=B2=D0=BA=D0=BB=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=BE=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/web/src/design-preview/bits.tsx           |  2 +-
 apps/web/src/design-preview/design-preview.css |  5 +++--
 apps/web/src/design-preview/kpi-strip.tsx      |  6 +++---
 apps/web/src/design-preview/preview-chrome.tsx | 10 +++++-----
 apps/web/src/design-preview/section-grid.tsx   |  6 +++---
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/design-preview/bits.tsx b/apps/web/src/design-preview/bits.tsx
index 403a408..3732add 100644
--- a/apps/web/src/design-preview/bits.tsx
+++ b/apps/web/src/design-preview/bits.tsx
@@ -434,7 +434,7 @@ export function PageTab({ value, label, count }: { value: string; label: string;
   return (
     <TabsTrigger value={value} className="gap-1.5 px-4 text-sm after:-bottom-px!">
       {label}
-      {count !== undefined ? <em className="font-mono text-[10px] font-normal not-italic opacity-60">{count}</em> : null}
+      {count !== undefined ? <span className="text-muted-foreground font-mono text-xs font-normal">{count}</span> : null}
     </TabsTrigger>
   )
 }
diff --git a/apps/web/src/design-preview/design-preview.css b/apps/web/src/design-preview/design-preview.css
index 3f9edfc..55d4837 100644
--- a/apps/web/src/design-preview/design-preview.css
+++ b/apps/web/src/design-preview/design-preview.css
@@ -77,7 +77,7 @@ html[data-preview-density][data-preview-contrast='high'] {
   --border: color-mix(in oklch, var(--foreground) 55%, transparent);
   --input: color-mix(in oklch, var(--foreground) 60%, transparent);
   --muted-foreground: color-mix(in oklch, var(--foreground) 88%, transparent);
-  --ring: oklch(0.85 0.17 95);
+  --ring: oklch(0.35 0.2 264);
 }
 
 html[data-preview-density].dark[data-preview-contrast='high'] {
@@ -127,7 +127,8 @@ html[data-preview-density] #main-content :focus-visible {
 }
 
 /* Шапка таблицы как на досках: 12px, лёгкая подложка. */
-html[data-preview-density] [data-slot='data-grid-table'] thead th {
+html[data-preview-density] [data-slot='data-grid-table'] thead th,
+html[data-preview-density] [data-slot='data-grid-table'] thead th :is(span, button, div) {
   font-size: 0.75rem;
   background: color-mix(in oklch, var(--muted) 30%, transparent);
 }
diff --git a/apps/web/src/design-preview/kpi-strip.tsx b/apps/web/src/design-preview/kpi-strip.tsx
index 9919e04..056e4e2 100644
--- a/apps/web/src/design-preview/kpi-strip.tsx
+++ b/apps/web/src/design-preview/kpi-strip.tsx
@@ -15,8 +15,8 @@ const VALUE: Record<KpiTone, string> = {
 const COLS: Record<number, string> = {
   1: 'grid-cols-1',
   2: 'grid-cols-2 max-[640px]:grid-cols-1',
-  3: 'grid-cols-1 min-[1241px]:grid-cols-3',
-  4: 'grid-cols-1 min-[641px]:grid-cols-2 min-[1241px]:grid-cols-4',
+  3: 'grid-cols-1 min-[1240px]:grid-cols-3',
+  4: 'grid-cols-1 min-[640px]:grid-cols-2 min-[1240px]:grid-cols-4',
 }
 
 const GLYPH: Record<KpiTone, string> = { neutral: '', ok: '●', in: '', wn: '▲', er: '✕' }
@@ -35,7 +35,7 @@ const BADGE = {
  */
 export function KpiStrip({ items, 'aria-label': ariaLabel }: { items: KpiItem[]; 'aria-label'?: string }) {
   return (
-    <Frame spacing="sm" className="@container w-full min-w-0" aria-label={ariaLabel}>
+    <Frame spacing="sm" className="w-full min-w-0" aria-label={ariaLabel}>
       <FramePanel className="overflow-hidden p-0">
         <div className={cn('bg-border grid gap-px', COLS[Math.min(Math.max(items.length, 1), 4)])}>
           {items.map((k) => (
diff --git a/apps/web/src/design-preview/preview-chrome.tsx b/apps/web/src/design-preview/preview-chrome.tsx
index 57abf82..def9b4b 100644
--- a/apps/web/src/design-preview/preview-chrome.tsx
+++ b/apps/web/src/design-preview/preview-chrome.tsx
@@ -349,17 +349,17 @@ function MonitorPopover() {
         }
       >
         <ActivityIcon className="text-warning size-4" aria-hidden />
-        <span className="text-warning hidden text-sm font-medium min-[1001px]:inline">Внимание</span>
-        <span className="hidden items-center gap-1.5 text-sm tabular-nums min-[1241px]:inline-flex">
+        <span className="text-warning hidden text-sm font-medium min-[1000px]:inline">Внимание</span>
+        <span className="hidden items-center gap-1.5 text-sm tabular-nums min-[1240px]:inline-flex">
           <span className="bg-destructive size-1.5 rounded-full" aria-hidden />
           {errors}
           <span className="bg-warning size-1.5 rounded-full" aria-hidden />
           {warnings}
         </span>
-        <span className="bg-destructive hidden size-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-semibold text-white min-[761px]:inline-flex min-[1241px]:hidden">
+        <span className="bg-destructive hidden size-4.5 min-w-4.5 items-center justify-center rounded-full px-1 text-[11px] font-semibold text-white min-[760px]:inline-flex min-[1240px]:hidden">
           {bad.length}
         </span>
-        <span className="bg-destructive ring-background absolute top-1 right-1 size-2 rounded-full ring-2 min-[761px]:hidden" aria-hidden />
+        <span className="bg-destructive ring-background absolute top-1 right-1 size-2 rounded-full ring-2 min-[760px]:hidden" aria-hidden />
       </PopoverTrigger>
       <PopoverContent align="end" className="flex w-[22rem] max-w-[calc(100vw-1.5rem)] flex-col gap-2 p-2">
         <div className="flex items-start justify-between gap-2 px-1.5 pt-1.5">
@@ -444,7 +444,7 @@ function FreshPill() {
   return (
     <span
       role="status"
-      className="text-muted-foreground hidden h-[30px] items-center gap-2 rounded-lg border px-2.5 text-xs min-[1321px]:inline-flex"
+      className="text-muted-foreground hidden h-[30px] items-center gap-2 rounded-lg border px-2.5 text-xs min-[1320px]:inline-flex"
     >
       <span className="bg-success size-1.5 rounded-full" aria-hidden />
       Обновлено 14:02 · Live
diff --git a/apps/web/src/design-preview/section-grid.tsx b/apps/web/src/design-preview/section-grid.tsx
index 5c33622..98c7679 100644
--- a/apps/web/src/design-preview/section-grid.tsx
+++ b/apps/web/src/design-preview/section-grid.tsx
@@ -296,11 +296,11 @@ export function PreviewSectionGrid<T extends object>({
           {typeof tools === 'function' ? tools(selectedIds) : tools}
           {card ? (
             <Tabs value={cards ? 'cards' : 'table'} onValueChange={(v) => setCards(v === 'cards')} aria-label="Вид списка">
-              <TabsList className="h-9 gap-0.5 p-[3px]">
-                <TabsTrigger value="table" className="h-7 px-2.5 text-[12.5px]">
+              <TabsList className="h-9! gap-0.5 p-[3px]">
+                <TabsTrigger value="table" className="h-7! px-2.5 text-[12.5px]">
                   Таблица
                 </TabsTrigger>
-                <TabsTrigger value="cards" className="h-7 px-2.5 text-[12.5px]">
+                <TabsTrigger value="cards" className="h-7! px-2.5 text-[12.5px]">
                   Карточки
                 </TabsTrigger>
               </TabsList>