fix(ui): центрировать EmptyState по empty-state-12

ResourcePage оборачивает пустой список в Frame; в панелях — centered=false.

Co-authored-by: Cursor <[email protected]>

apps/web/src/components/domain-bindings-card.tsx

@@ -87,6 +87,7 @@ export function DomainBindingsCard({ bindings }: DomainBindingsCardProps) {
             icon={Link2Icon}
             title="Нет привязок"
             description="Привяжите сервис к поддомену"
+            centered={false}
           />
         ) : (
           <ItemGroup className="gap-0">

apps/web/src/components/domains/domain-availability-panel.tsx

@@ -243,6 +243,7 @@ export function DomainAvailabilityPanel({
                 icon={ActivityIcon}
                 title="Мониторы не настроены"
                 description="Добавьте hostname для проверки доступности"
+                centered={false}
               />
             ) : (
               <ItemGroup className="gap-0">

apps/web/src/components/empty-state.tsx

@@ -18,8 +18,18 @@ interface EmptyStateProps {
   className?: string
   /** Use IconStack media (empty-state-12). Default true. */
   stackedIcon?: boolean
+  /**
+   * Center in available width/height (empty-state-12).
+   * Preview: https://reui.io/preview/base/empty-state-12
+   * Set false for tight panels/sheets.
+   */
+  centered?: boolean
 }
 
+/**
+ * ReUI Empty + IconStack — adapted from empty-state-12.
+ * @see https://reui.io/preview/base/empty-state-12
+ */
 export function EmptyState({
   icon: Icon = InboxIcon,
   title,
@@ -27,9 +37,15 @@ export function EmptyState({
   action,
   className,
   stackedIcon = true,
+  centered = true,
 }: EmptyStateProps) {
-  return (
+  const body = (
-    <Empty className={cn('max-w-md flex-none border-0 bg-transparent p-0', className)}>
+    <Empty
+      className={cn(
+        'max-w-md flex-none border-0 bg-transparent p-0',
+        !centered && className,
+      )}
+    >
       <EmptyHeader className="gap-5 text-center">
         <EmptyMedia className="mb-0">
           {stackedIcon ? (
@@ -53,7 +69,24 @@ export function EmptyState({
           ) : null}
         </div>
       </EmptyHeader>
-      {action ? <EmptyContent>{action}</EmptyContent> : null}
+      {action ? (
+        <EmptyContent className="mt-1 items-center justify-center">
+          {action}
+        </EmptyContent>
+      ) : null}
     </Empty>
   )
+
+  if (!centered) return body
+
+  return (
+    <div
+      className={cn(
+        'flex w-full flex-1 items-center justify-center py-14 sm:py-16',
+        className,
+      )}
+    >
+      {body}
+    </div>
+  )
 }

apps/web/src/components/health/health-timeline.tsx

@@ -36,6 +36,7 @@ export function HealthTimeline({ events }: HealthTimelineProps) {
         icon={Link2Icon}
         title="Нет событий"
         description="Результаты проверок появятся после первого прогона"
+        centered={false}
       />
     )
   }

apps/web/src/components/reui-kit/resource-page.tsx

@@ -242,11 +242,32 @@ export function ResourcePage<T extends object>({
 
   if (data.length === 0 && emptyState) {
     return (
-      <EmptyState
+      <Frame dense variant="default" spacing="sm" className="w-full">
-        title={emptyState.title}
+        {!hideHeader ? (
-        description={emptyState.description}
+          <FrameHeader className="flex-row items-start justify-between gap-3">
-        action={emptyState.action}
+            <div className="flex min-w-0 flex-col gap-px">
-      />
+              <FrameTitle className="text-balance">{title}</FrameTitle>
+              {description ? (
+                <FrameDescription className="text-xs text-pretty">
+                  {description}
+                </FrameDescription>
+              ) : null}
+            </div>
+            {primaryAction ? (
+              <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+                {primaryAction}
+              </div>
+            ) : null}
+          </FrameHeader>
+        ) : null}
+        <FramePanel className="flex min-h-[min(28rem,55svh)] w-full flex-col items-stretch justify-center p-0">
+          <EmptyState
+            title={emptyState.title}
+            description={emptyState.description}
+            action={emptyState.action}
+          />
+        </FramePanel>
+      </Frame>
     )
   }
 

apps/web/src/components/service-edit-sheet.tsx

@@ -509,6 +509,7 @@ export function ServiceEditSheet({
                   icon={Link2Icon}
                   title="Нет привязок"
                   description="Необязательно. Пример: newdom.ivx.su — зона ivx.su определится автоматически."
+                  centered={false}
                   action={
                     <Button type="button" variant="outline" size="sm" onClick={handleAddBinding}>
                       <PlusIcon data-icon="inline-start" />