fix(web): выровнять sheets и header chrome с CFDM/EvoBGP

Убрать растягивание полей в sheet (auto-rows-min + Field), footer в ряд; SystemMonitor pill; дашборд без DataGrid.

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

apps/web/src/components/app-sidebar.tsx

@@ -22,7 +22,7 @@ import {
 } from '@evofw/ui/components/sidebar'
 
 const overviewNav = [
-  { to: '/', label: 'Дашборд', icon: LayoutDashboardIcon, exact: true },
+  { to: '/', label: 'Панель управления', icon: LayoutDashboardIcon, exact: true },
 ] as const
 
 const opsNav = [

apps/web/src/components/form-sheet.tsx

@@ -24,6 +24,11 @@ interface FormSheetProps<T extends FieldValues> {
   contentClassName?: string
 }
 
+/**
+ * Side sheet form shell — shadcn sheet-demo + ReUI sheet-8 layout.
+ * Preview: https://reui.io/preview/base/sheet-8
+ * Docs: https://ui.shadcn.com/docs/components/base/sheet
+ */
 export function FormSheet<T extends FieldValues>({
   open,
   onOpenChange,
@@ -41,11 +46,11 @@ export function FormSheet<T extends FieldValues>({
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
-        className={cn('flex flex-col gap-0 overflow-hidden', className)}
+        className={cn('flex flex-col gap-0 overflow-hidden sm:max-w-md', className)}
       >
         <SheetHeader className="shrink-0">
           <SheetTitle>{title}</SheetTitle>
-          {description && <SheetDescription>{description}</SheetDescription>}
+          {description ? <SheetDescription>{description}</SheetDescription> : null}
         </SheetHeader>
         <FormProvider {...form}>
           <form
@@ -54,14 +59,16 @@ export function FormSheet<T extends FieldValues>({
           >
             <div
               className={cn(
-                'flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4',
+                'grid flex-1 auto-rows-min gap-4 overflow-y-auto px-4',
                 contentClassName,
               )}
             >
               {children}
             </div>
             {footer ? (
-              <SheetFooter className="shrink-0 border-t">{footer}</SheetFooter>
+              <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
+                {footer}
+              </SheetFooter>
             ) : null}
           </form>
         </FormProvider>

apps/web/src/components/layout/search-menu.tsx

@@ -29,7 +29,7 @@ import {
 const NAV_ITEMS = [
   {
     to: '/',
-    label: 'Дашборд',
+    label: 'Панель управления',
     keywords: ['dashboard', 'панель', 'обзор'],
     icon: LayoutDashboardIcon,
   },

apps/web/src/components/layout/site-header.tsx

@@ -19,7 +19,7 @@ export interface RouteBreadcrumbLoaderData {
 }
 
 const routeTitles: Record<string, string> = {
-  '/': 'Дашборд',
+  '/': 'Панель управления',
   '/agents': 'Агенты',
   '/lists': 'Списки IP',
   '/rules': 'Правила',
@@ -32,7 +32,7 @@ function getBreadcrumbs(
   dynamicLabels: Record<string, string>,
 ) {
   if (pathname === '/') {
-    return [{ label: 'Дашборд', href: '/' }]
+    return [{ label: 'Панель управления', href: '/' }]
   }
 
   if (pathname.match(/^\/agents\/[^/]+$/)) {
@@ -47,7 +47,7 @@ function getBreadcrumbs(
     return [{ label: title, href: pathname }]
   }
 
-  return [{ label: 'Дашборд', href: '/' }]
+  return [{ label: 'Панель управления', href: '/' }]
 }
 
 function useDynamicBreadcrumbLabels() {
@@ -73,7 +73,10 @@ export function SiteHeader() {
   return (
     <header className="bg-background sticky top-0 z-10 flex h-12 shrink-0 items-center gap-2 border-b px-4 md:px-6">
       <SidebarTrigger className="-ml-1" />
-      <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
+      <Separator
+        orientation="vertical"
+        className="mr-2 data-vertical:h-4 data-vertical:self-center"
+      />
       <Breadcrumb>
         <BreadcrumbList>
           {crumbs.map((crumb, index) => {
@@ -84,7 +87,9 @@ export function SiteHeader() {
                   <BreadcrumbSeparator className="hidden md:block" />
                 )}
                 <BreadcrumbItem
-                  className={index === 0 && !isLast ? 'hidden md:block' : undefined}
+                  className={
+                    index === 0 && !isLast ? 'hidden md:block' : undefined
+                  }
                 >
                   {isLast ? (
                     <BreadcrumbPage>{crumb.label}</BreadcrumbPage>

apps/web/src/components/layout/system-monitor-popover.tsx

@@ -7,7 +7,6 @@ import { cn } from '@evofw/ui/lib/utils'
 import { Item, ItemMedia } from '@evofw/ui/components/item'
 import { Popover, PopoverContent, PopoverTrigger } from '@evofw/ui/components/popover'
 import { Progress } from '@evofw/ui/components/progress'
-import { Button } from '@evofw/ui/components/button'
 import {
   agentsQueryOptions,
   dashboardQueryOptions,
@@ -53,11 +52,18 @@ function MetricCell({ metric }: { metric: MonitorMetric }) {
               {metric.icon}
             </ItemMedia>
           </Item>
-          <span className="text-muted-foreground truncate text-[11px]">{metric.label}</span>
+          <span className="text-muted-foreground truncate text-[11px]">
+            {metric.label}
+          </span>
         </div>
-        <span className="shrink-0 text-xs font-semibold tabular-nums" style={{ color }}>
+        <span
+          className="shrink-0 text-xs font-semibold tabular-nums"
+          style={{ color }}
+        >
           {metric.value}
-          <span className="text-muted-foreground ml-0.5 text-[10px] font-normal">{metric.unit}</span>
+          <span className="text-muted-foreground ml-0.5 text-[10px] font-normal">
+            {metric.unit}
+          </span>
         </span>
       </div>
       <Progress
@@ -69,7 +75,7 @@ function MetricCell({ metric }: { metric: MonitorMetric }) {
   )
 }
 
-/** Live system monitor — FW dashboard/agents. Preview: app-shell-12 */
+/** Live system monitor — CFDM/EvoBGP chrome pill. Preview: app-shell-12 */
 export function SystemMonitorPopover() {
   const dashQ = useQuery({ ...dashboardQueryOptions(), refetchInterval: 30_000 })
   const agentsQ = useQuery({ ...agentsQueryOptions(), refetchInterval: 30_000 })
@@ -80,7 +86,8 @@ export function SystemMonitorPopover() {
   const agents = agentsQ.data?.items ?? []
   const approved = agents.filter((a) => a.status === 'approved').length
   const online = d?.agents_online ?? agents.filter((a) => a.last_seen_at).length
-  const pending = d?.agents_pending ?? agents.filter((a) => a.status === 'pending').length
+  const pending =
+    d?.agents_pending ?? agents.filter((a) => a.status === 'pending').length
   const onlinePct = approved > 0 ? Math.round((online / approved) * 100) : 0
   const listsCount = listsQ.data?.items?.length ?? d?.lists_total ?? 0
   const rulesCount = rulesQ.data?.items?.length ?? 0
@@ -105,7 +112,12 @@ export function SystemMonitorPopover() {
         unit: '%',
         percent: onlinePct,
         icon: <Server aria-hidden />,
-        tone: onlinePct >= 80 ? 'success' : onlinePct >= 40 ? 'warning' : 'destructive',
+        tone:
+          onlinePct >= 80
+            ? 'success'
+            : onlinePct >= 40
+              ? 'warning'
+              : 'destructive',
         alert: pending > 0 || (approved > 0 && onlinePct < 50),
       },
       {
@@ -132,42 +144,86 @@ export function SystemMonitorPopover() {
     [apiOk, onlinePct, pending, approved, listsCount, rulesCount],
   )
 
-  const hasAlert = metrics.some((m) => m.alert)
+  const spiking = metrics.some((m) => m.alert)
 
   return (
     <Popover>
       <PopoverTrigger
         render={
-          <Button
-            variant="ghost"
-            size="icon"
-            aria-label="Мониторинг системы"
-            className={cn(hasAlert && 'text-warning')}
+          <button
+            type="button"
+            aria-label="Монитор системы"
+            className={cn(
+              'relative inline-flex h-8 items-center gap-1.5 rounded-md border px-2 transition-colors outline-none',
+              'border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring',
+            )}
           />
         }
       >
-        <Activity className="size-4.5" aria-hidden />
-        {hasAlert ? (
-          <Badge
-            variant="warning"
-            size="sm"
-            className="absolute top-1 right-1 size-1.5 rounded-full p-0"
+        <span className="relative flex size-3.5 items-center justify-center">
+          <Activity
             aria-hidden
+            className={cn(
+              'size-3.5 transition-colors',
+              spiking ? 'text-destructive' : 'text-muted-foreground',
+            )}
           />
-        ) : null}
+          {spiking ? (
+            <span
+              className="bg-destructive/25 absolute inset-0 animate-ping rounded-full"
+              aria-hidden
+            />
+          ) : null}
+        </span>
+        <span className="text-foreground hidden text-xs font-medium sm:inline">
+          Система
+        </span>
+        <Badge
+          variant={spiking ? 'destructive-light' : 'success-light'}
+          size="xs"
+          className="h-4 px-1.5 text-[10px]"
+        >
+          {spiking ? 'Внимание' : 'Норма'}
+        </Badge>
       </PopoverTrigger>
-      <PopoverContent align="end" className="w-80 p-0" sideOffset={8}>
-        <div className="border-b px-3 py-2">
-          <div className="text-sm font-medium">Система</div>
-          <div className="text-muted-foreground text-xs">
-            Агенты и политики EvoFirewall
-          </div>
+
+      <PopoverContent
+        align="end"
+        sideOffset={8}
+        className="flex w-80 flex-col gap-0! p-0!"
+      >
+        <div className="border-border flex items-center justify-between border-b px-3 py-2.5">
+          <span className="text-foreground text-xs font-medium">
+            Монитор EvoFirewall
+          </span>
+          <span className="text-muted-foreground text-[11px] tabular-nums">
+            {new Date().toLocaleTimeString('ru-RU')}
+          </span>
         </div>
-        <div className="grid grid-cols-2 divide-x divide-y">
-          {metrics.map((m) => (
-            <MetricCell key={m.id} metric={m} />
+        <div className="grid grid-cols-2">
+          {metrics.map((metric, i) => (
+            <div
+              key={metric.id}
+              className={cn(
+                i % 2 === 1 && 'border-border border-l',
+                i >= 2 && 'border-border border-t',
+              )}
+            >
+              <MetricCell metric={metric} />
+            </div>
           ))}
         </div>
+        <div className="border-border text-muted-foreground border-t px-3 py-2 text-[11px]">
+          Pending:{' '}
+          <span className="text-foreground font-medium tabular-nums">
+            {pending}
+          </span>
+          {' · '}
+          Online:{' '}
+          <span className="text-foreground font-medium tabular-nums">
+            {online}/{approved || '—'}
+          </span>
+        </div>
       </PopoverContent>
     </Popover>
   )

apps/web/src/components/reui-kit/kpi-stat-grid.tsx

@@ -115,7 +115,11 @@ function KpiStatCardItem({ card }: { card: KpiStatCard }) {
   if (card.to) {
     return (
       <FramePanel className={panelClass}>
-        <Link to={card.to} search={card.search} className="focus-visible:outline-none">
+        <Link
+          to={card.to}
+          {...(card.search ? { search: card.search } : {})}
+          className="focus-visible:outline-none"
+        >
           <KpiStatCardBody card={card} />
         </Link>
       </FramePanel>

apps/web/src/components/reui-kit/quick-action-grid.tsx

@@ -99,7 +99,7 @@ export function QuickActionGrid({
           >
             <Link
               to={action.to}
-              search={action.search}
+              {...(action.search ? { search: action.search } : {})}
               className="focus-visible:outline-none"
               aria-label={`${action.title}: ${action.description}`}
             >

apps/web/src/routes/_auth/index.tsx

@@ -1,7 +1,6 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { useMemo, useState } from 'react'
-import type { ColumnDef } from '@tanstack/react-table'
+import { useMemo } from 'react'
 import {
   ServerIcon,
   BanIcon,
@@ -23,32 +22,46 @@ import {
   FrameTitle,
 } from '@/components/reui/frame'
 import { Badge } from '@/components/reui/badge'
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemTitle,
+} from '@evofw/ui/components/item'
 import {
   dashboardQueryOptions,
   agentsQueryOptions,
   recentStatsQueryOptions,
 } from '@/queries'
 import type { Agent } from '@evofw/shared'
-import { DataGrid } from '@/components/reui/data-grid/data-grid'
-import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
-import {
-  getCoreRowModel,
-  useReactTable,
-} from '@tanstack/react-table'
 
 export const Route = createFileRoute('/_auth/')({
   component: DashboardPage,
 })
 
+const EMPTY_AGENTS: Agent[] = []
+
 function DashboardPage() {
   const dash = useQuery(dashboardQueryOptions())
   const agents = useQuery(agentsQueryOptions())
   const stats = useQuery(recentStatsQueryOptions())
 
   const d = dash.data
-  const items = agents.data?.items ?? []
-  const pending = items.filter((a) => a.status === 'pending')
-  const applyErrors = items.filter((a) => a.last_apply_error)
+  const items = agents.data?.items ?? EMPTY_AGENTS
+
+  const pending = useMemo(
+    () => items.filter((a) => a.status === 'pending'),
+    [items],
+  )
+  const applyErrors = useMemo(
+    () => items.filter((a) => a.last_apply_error),
+    [items],
+  )
+  const previewAgents = useMemo(() => items.slice(0, 8), [items])
+  const samples = useMemo(
+    () => (stats.data?.items ?? []).slice(0, 10),
+    [stats.data?.items],
+  )
 
   const kpiCards: KpiStatCard[] = useMemo(
     () => [
@@ -92,93 +105,40 @@ function DashboardPage() {
     [d],
   )
 
-  const quickActions: QuickActionItem[] = [
-    {
-      id: 'agents',
-      title: 'Агенты',
-      description: 'Enroll и approve',
-      to: '/agents',
-      icon: <ServerIcon aria-hidden />,
-      iconClassName: 'text-info',
-    },
-    {
-      id: 'lists',
-      title: 'Списки',
-      description: 'Blocklists / sources',
-      to: '/lists',
-      icon: <ListIcon aria-hidden />,
-      iconClassName: 'text-primary',
-    },
-    {
-      id: 'rules',
-      title: 'Правила',
-      description: 'Allow / deny policy',
-      to: '/rules',
-      icon: <BanIcon aria-hidden />,
-      iconClassName: 'text-warning',
-    },
-  ]
-
-  const agentColumns: ColumnDef<Agent>[] = useMemo(
+  const quickActions: QuickActionItem[] = useMemo(
     () => [
       {
-        accessorKey: 'name',
-        header: 'Имя',
-        cell: ({ row }) => (
-          <Link
-            to="/agents/$id"
-            params={{ id: row.original.id }}
-            className="font-medium underline-offset-4 hover:underline"
-          >
-            {row.original.name}
-          </Link>
-        ),
+        id: 'agents',
+        title: 'Агенты',
+        description: 'Enroll и approve',
+        to: '/agents',
+        icon: <ServerIcon aria-hidden />,
+        iconClassName: 'text-info',
       },
       {
-        accessorKey: 'status',
-        header: 'Статус',
-        cell: ({ row }) => (
-          <Badge
-            variant={
-              row.original.status === 'approved'
-                ? 'success-light'
-                : row.original.status === 'pending'
-                  ? 'warning-light'
-                  : 'secondary'
-            }
-            size="sm"
-          >
-            {row.original.status}
-          </Badge>
-        ),
+        id: 'lists',
+        title: 'Списки',
+        description: 'Blocklists / sources',
+        to: '/lists',
+        icon: <ListIcon aria-hidden />,
+        iconClassName: 'text-primary',
       },
-      { accessorKey: 'policy_mode', header: 'Режим' },
       {
-        accessorKey: 'last_apply_packets_dropped',
-        header: 'Dropped',
-        cell: ({ row }) => (
-          <span className="tabular-nums">
-            {row.original.last_apply_packets_dropped ?? 0}
-          </span>
-        ),
+        id: 'rules',
+        title: 'Правила',
+        description: 'Allow / deny policy',
+        to: '/rules',
+        icon: <BanIcon aria-hidden />,
+        iconClassName: 'text-warning',
       },
     ],
     [],
   )
 
-  const agentsTable = useReactTable({
-    data: items.slice(0, 8),
-    columns: agentColumns,
-    getCoreRowModel: getCoreRowModel(),
-    getRowId: (r) => r.id,
-  })
-
-  const samples = (stats.data?.items ?? []).slice(0, 10)
-
   return (
     <PageShell>
       <PageHeader
-        title="Дашборд"
+        title="Панель управления"
         description="Обзор агентов и пакетной статистики"
       />
       <OpsDashboard
@@ -191,10 +151,45 @@ function DashboardPage() {
               <FrameHeader>
                 <FrameTitle>Агенты</FrameTitle>
               </FrameHeader>
-              <FramePanel className="p-0">
-                <DataGrid table={agentsTable} recordCount={items.length}>
-                  <DataGridTable />
-                </DataGrid>
+              <FramePanel>
+                {previewAgents.length === 0 ? (
+                  <p className="text-muted-foreground text-sm">Нет агентов</p>
+                ) : (
+                  <ItemGroup className="gap-2">
+                    {previewAgents.map((a) => (
+                      <Item key={a.id} variant="outline" size="sm">
+                        <ItemContent className="flex flex-row items-center justify-between gap-2">
+                          <ItemTitle className="truncate font-medium">
+                            <Link
+                              to="/agents/$id"
+                              params={{ id: a.id }}
+                              className="hover:underline"
+                            >
+                              {a.name}
+                            </Link>
+                          </ItemTitle>
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant={
+                                a.status === 'approved'
+                                  ? 'success-light'
+                                  : a.status === 'pending'
+                                    ? 'warning-light'
+                                    : 'secondary'
+                              }
+                              size="sm"
+                            >
+                              {a.status}
+                            </Badge>
+                            <span className="text-muted-foreground text-xs tabular-nums">
+                              ↓{a.last_apply_packets_dropped ?? 0}
+                            </span>
+                          </div>
+                        </ItemContent>
+                      </Item>
+                    ))}
+                  </ItemGroup>
+                )}
               </FramePanel>
             </Frame>
             <Frame dense spacing="sm">
@@ -252,7 +247,10 @@ function DashboardPage() {
             {applyErrors.map((a) => (
               <div key={`err-${a.id}`} className="text-sm">
                 <span className="text-destructive font-medium">{a.name}</span>
-                <span className="text-muted-foreground"> — {a.last_apply_error}</span>
+                <span className="text-muted-foreground">
+                  {' '}
+                  — {a.last_apply_error}
+                </span>
               </div>
             ))}
           </div>

apps/web/src/routes/_auth/lists.tsx

@@ -8,8 +8,8 @@ import { PageHeader, PageShell, ResourcePage } from '@/components/reui-kit'
 import { listsQueryOptions } from '@/queries'
 import { apiFetch } from '@/lib/api'
 import { Button } from '@evofw/ui/components/button'
+import { Field, FieldLabel } from '@evofw/ui/components/field'
 import { Input } from '@evofw/ui/components/input'
-import { Label } from '@evofw/ui/components/label'
 import { Textarea } from '@evofw/ui/components/textarea'
 import {
   Select,
@@ -205,18 +205,22 @@ function ListsPage() {
       />
 
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent className="flex flex-col gap-4 sm:max-w-md">
-          <SheetHeader>
+        <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
+          <SheetHeader className="shrink-0">
             <SheetTitle>Новый список</SheetTitle>
             <SheetDescription>Источник префиксов для правил</SheetDescription>
           </SheetHeader>
-          <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-1">
-            <div className="flex flex-col gap-2">
-              <Label>Имя</Label>
-              <Input value={name} onChange={(e) => setName(e.target.value)} />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label>Тип</Label>
+          <div className="grid flex-1 auto-rows-min gap-4 overflow-y-auto px-4">
+            <Field>
+              <FieldLabel htmlFor="list-name">Имя</FieldLabel>
+              <Input
+                id="list-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </Field>
+            <Field>
+              <FieldLabel>Тип</FieldLabel>
               <Select
                 value={type}
                 onValueChange={(v) => setType(v as typeof type)}
@@ -233,9 +237,9 @@ function ListsPage() {
                   </SelectItem>
                 </SelectContent>
               </Select>
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="list-extra">
                 {type === 'static'
                   ? 'CIDR (через пробел/запятую)'
                   : type === 'json_url'
@@ -243,15 +247,16 @@ function ListsPage() {
                     : type === 'domains'
                       ? 'Домены'
                       : 'Community ID'}
-              </Label>
+              </FieldLabel>
               <Textarea
+                id="list-extra"
                 value={extra}
                 onChange={(e) => setExtra(e.target.value)}
                 rows={3}
               />
-            </div>
+            </Field>
           </div>
-          <SheetFooter>
+          <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
             <Button variant="outline" onClick={() => setSheetOpen(false)}>
               Отмена
             </Button>

apps/web/src/routes/_auth/rules.tsx

@@ -13,8 +13,8 @@ import {
 } from '@/queries'
 import { apiFetch } from '@/lib/api'
 import { Button } from '@evofw/ui/components/button'
+import { Field, FieldLabel } from '@evofw/ui/components/field'
 import { Input } from '@evofw/ui/components/input'
-import { Label } from '@evofw/ui/components/label'
 import {
   Select,
   SelectContent,
@@ -183,21 +183,22 @@ function RulesPage() {
       />
 
       <Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
-        <SheetContent className="flex flex-col gap-4 sm:max-w-md">
-          <SheetHeader>
+        <SheetContent className="flex flex-col gap-0 overflow-hidden sm:max-w-md">
+          <SheetHeader className="shrink-0">
             <SheetTitle>Новое правило</SheetTitle>
             <SheetDescription>Priority + action + list scope</SheetDescription>
           </SheetHeader>
-          <div className="grid flex-1 gap-3 sm:grid-cols-2">
-            <div className="flex flex-col gap-2">
-              <Label>Priority</Label>
+          <div className="grid flex-1 auto-rows-min gap-4 overflow-y-auto px-4 sm:grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="rule-priority">Priority</FieldLabel>
               <Input
+                id="rule-priority"
                 value={priority}
                 onChange={(e) => setPriority(e.target.value)}
               />
-            </div>
-            <div className="flex flex-col gap-2">
-              <Label>Action</Label>
+            </Field>
+            <Field>
+              <FieldLabel>Action</FieldLabel>
               <Select
                 value={action}
                 onValueChange={(v) => setAction(v as 'allow' | 'deny')}
@@ -210,14 +211,14 @@ function RulesPage() {
                   <SelectItem value="allow">allow</SelectItem>
                 </SelectContent>
               </Select>
-            </div>
-            <div className="flex flex-col gap-2 sm:col-span-2">
-              <Label>Список</Label>
+            </Field>
+            <Field className="sm:col-span-2">
+              <FieldLabel>Список</FieldLabel>
               <Select
                 value={listId || null}
                 onValueChange={(v) => setListId(v ?? '')}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue placeholder="IP list" />
                 </SelectTrigger>
                 <SelectContent>
@@ -228,16 +229,16 @@ function RulesPage() {
                   ))}
                 </SelectContent>
               </Select>
-            </div>
-            <div className="flex flex-col gap-2 sm:col-span-2">
-              <Label>Scope</Label>
+            </Field>
+            <Field className="sm:col-span-2">
+              <FieldLabel>Scope</FieldLabel>
               <Select
                 value={agentId}
                 onValueChange={(v) => {
                   if (v) setAgentId(v)
                 }}
               >
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -249,9 +250,9 @@ function RulesPage() {
                   ))}
                 </SelectContent>
               </Select>
-            </div>
+            </Field>
           </div>
-          <SheetFooter>
+          <SheetFooter className="mt-0 shrink-0 flex-row flex-wrap gap-2 border-t">
             <Button variant="outline" onClick={() => setSheetOpen(false)}>
               Отмена
             </Button>

packages/ui/src/components/sheet.tsx

@@ -92,7 +92,7 @@ function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      className={cn("mt-auto flex flex-row flex-wrap gap-2 p-4", className)}
       {...props}
     />
   )