From b89e72ec1b3d99581019a1e6af4387fa44325e52 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 23 Oct 2026 12:14:13 +0700
Subject: [PATCH] =?UTF-8?q?fix(design-preview):=20=D0=BF=D0=BB=D0=B8=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B8=20=D0=BC=D0=BE=D0=BD=D0=B8=D1=82=D0=BE=D1=80=D0=B0?=
 =?UTF-8?q?=20=D1=81=D0=B8=D1=81=D1=82=D0=B5=D0=BC=D1=8B=20=D0=BD=D0=B5=20?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B7=D1=8A=D0=B5=D0=B7=D0=B6=D0=B0=D1=8E=D1=82?=
 =?UTF-8?q?=D1=81=D1=8F?=
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/preview-chrome.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/design-preview/preview-chrome.tsx b/apps/web/src/design-preview/preview-chrome.tsx
index 7438ca1..1cb817b 100644
--- a/apps/web/src/design-preview/preview-chrome.tsx
+++ b/apps/web/src/design-preview/preview-chrome.tsx
@@ -362,7 +362,7 @@ function MonitorPopover() {
         </span>
         <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">
+      <PopoverContent align="end" className="flex w-[24rem] 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">
           <div className="grid leading-tight">
             <b className="text-sm font-semibold">Состояние системы</b>
@@ -398,12 +398,10 @@ function MonitorPopover() {
         </ul>
         <div className="grid grid-cols-2 gap-1.5">
           {MONITOR_METRICS.map((m) => (
-            <div key={m.l} className="bg-muted/55 flex flex-col gap-2 rounded-lg px-3 py-2.5">
-              <div className="flex items-baseline justify-between gap-2">
-                <span className="text-muted-foreground truncate text-xs">{m.l}</span>
-                <b className={cn('text-[15px] font-semibold tabular-nums', m.tone === 'success' ? 'text-success' : 'text-warning')}>{m.v}</b>
-              </div>
-              <div className="bg-muted-foreground/25 h-[3px] overflow-hidden rounded-full">
+            <div key={m.l} className="bg-muted/55 flex min-w-0 flex-col gap-1.5 rounded-lg px-3 py-2.5">
+              <span className="text-muted-foreground text-xs leading-snug">{m.l}</span>
+              <b className={cn('text-base font-semibold whitespace-nowrap tabular-nums', m.tone === 'success' ? 'text-success' : 'text-warning')}>{m.v}</b>
+              <div className="bg-muted-foreground/25 mt-auto h-[3px] overflow-hidden rounded-full">
                 <i className={cn('block h-full rounded-full', m.tone === 'success' ? 'bg-success' : 'bg-warning')} style={{ width: `${m.p}%` }} />
               </div>
             </div>