refactor(web): streamline dashboard and tab components for improved layout

Refactored various dashboard components and tab structures to enhance layout and responsiveness. Adjusted class names to include 'min-w-0' for better overflow handling and improved alignment. Updated the ChartDonutMetric to include a tooltip for better data representation. Simplified the DashboardRecentJobsGrid and DashboardRecentRevisionsGrid by replacing DataGridSection with DataGridShell for consistency. Enhanced the OpsDashboard layout for better clarity and usability.
refactor(web): improve layout and responsiveness of settings components
2026-08-18 16:03:52 +07:00 · 2026-08-18 01:19:42 +07:00
24 changed files with 428 additions and 393 deletions
@@ -49,7 +49,8 @@ export function AccessApiKeysCard({
    <>
      <FrameDataGrid
        title="API-ключи"
-        description="Управление ключами tenant. Полный токен показывается только при создании и ротации."
+        description="Полный токен показывается только при создании и ротации."
+        className="min-w-0"
        actions={
          <>
            <Button size="sm" variant="outline" type="button" onClick={onRetry} disabled={isLoading}>
@@ -11,6 +11,7 @@ import { ConfirmDialog } from '@/components/confirm-dialog'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { formatApiKeyDate } from '@/lib/access/api-key-labels'
+import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
 import type { ApiKey } from '@/types/api'

@@ -34,7 +35,14 @@ export function AccessApiKeysGrid({
      {
        accessorKey: 'name',
        header: ({ column }) => <DataGridColumnHeader column={column} title="Имя" />,
-        cell: ({ row }) => <DataGridPrimaryCell title={row.original.name} accent="primary" />,
+        cell: ({ row }) => (
+          <DataGridPrimaryCell
+            title={row.original.name}
+            accent="primary"
+            subtitle={`${row.original.prefix}…`}
+          />
+        ),
+        minSize: 160,
        meta: { headerTitle: 'Имя' },
      },
      {
@@ -45,14 +53,6 @@ export function AccessApiKeysGrid({
        ),
        meta: { headerTitle: 'Роль' },
      },
-      {
-        accessorKey: 'prefix',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Префикс" />,
-        cell: ({ row }) => (
-          <span className="font-mono text-xs text-muted-foreground">{row.original.prefix}…</span>
-        ),
-        meta: { headerTitle: 'Префикс' },
-      },
      {
        id: 'status',
        enableSorting: false,
@@ -77,11 +77,11 @@ export function AccessApiKeysGrid({
      {
        id: 'last_used_at',
        accessorFn: (row) => row.last_used_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Последнее использование" />,
+        header: ({ column }) => <DataGridColumnHeader column={column} title="Использован" />,
        cell: ({ row }) => (
          <DataGridMutedCell>{formatApiKeyDate(row.original.last_used_at)}</DataGridMutedCell>
        ),
-        meta: { headerTitle: 'Последнее использование' },
+        meta: { headerTitle: 'Использован' },
      },
      {
        id: 'actions',
@@ -90,7 +90,7 @@ export function AccessApiKeysGrid({
        cell: ({ row }) => {
          const k = row.original
          return (
-            <div className="flex gap-1">
+            <div className="flex shrink-0 gap-1">
              <ConfirmDialog
                trigger={
                  <Button
@@ -149,6 +149,7 @@ export function AccessApiKeysGrid({
      recordCount={filteredCount}
      isLoading={isLoading}
      emptyMessage="Нет ключей"
+      tableLayout={DATA_GRID_DENSE_LAYOUT}
      searchValue={globalFilter}
      onSearchChange={setGlobalFilter}
      searchPlaceholder="Поиск API-ключей…"
@@ -2,6 +2,8 @@ import { Cell, Label, Pie, PieChart } from 'recharts'

 import {
  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
  type ChartConfig,
 } from '@evobgp/ui/components/chart'
 import { cn } from '@evobgp/ui/lib/utils'
@@ -43,6 +45,7 @@ export function ChartDonutMetric({
    <div className={cn('flex flex-col items-center justify-start gap-4 sm:flex-row sm:gap-6', className)}>
      <ChartContainer config={chartConfig} className="mx-0 aspect-square h-44 w-44 shrink-0">
        <PieChart>
+          <ChartTooltip content={<ChartTooltipContent nameKey="label" hideLabel />} />
          <Pie
            data={data}
            dataKey="count"
@@ -41,14 +41,17 @@ export function BadgeTabs({
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      orientation="horizontal"
-      className={cn('w-full', className)}
+      className={cn('w-full min-w-0', className)}
    >
      <TabsList
        variant="line"
-        className={cn('mb-3.5 w-full justify-start gap-6', listClassName)}
+        className={cn(
+          'mb-3.5 w-full min-w-0 justify-start gap-4',
+          listClassName,
+        )}
      >
        {items.map((item) => (
-          <TabsTrigger key={item.value} value={item.value} className="gap-2">
+          <TabsTrigger key={item.value} value={item.value} className="shrink-0 gap-2">
            {item.icon}
            {item.label}
            {item.count !== undefined ? (
@@ -3,13 +3,16 @@ import { useMemo, useState } from 'react'
 import { ChartDonutMetric } from '@/components/analytics/chart-donut-metric'
 import { AnalyticsSegmentControl } from '@/components/analytics/analytics-segment-control'
 import { PanelCard } from '@/components/panel-card'
-import { Separator } from '@evobgp/ui/components/separator'
 import { jobStatusBreakdown, moduleTypeBreakdown } from '@/lib/metrics'
 import type { JobRow, ModuleRow } from '@/types/api'

 type FlowMode = 'jobs' | 'modules'

-/** chart-13 inspired donut breakdown (Card surface). */
+/**
+ * Donut distribution — chart-27 DNA: Frame + one legend (inside ChartDonutMetric).
+ * @see https://reui.io/preview/base/chart-27
+ * @see https://reui.io/docs/components/base/frame
+ */
 export function DashboardOperationsBreakdown({
  jobs,
  modules,
@@ -32,7 +35,7 @@ export function DashboardOperationsBreakdown({
  return (
    <PanelCard
      title="Поток операций"
-      description="Распределение задач и типов модулей"
+      description="Доли статусов задач или типов модулей"
      actions={
        <AnalyticsSegmentControl
          value={mode}
@@ -43,45 +46,16 @@ export function DashboardOperationsBreakdown({
          ]}
        />
      }
-      className="h-full"
+      className="min-w-0"
+      contentClassName="px-5 py-4"
    >
-      <div className="p-4">
-        {loading ? (
-          <div className="text-muted-foreground flex h-48 items-center justify-center text-sm">
-            Загрузка…
-          </div>
-        ) : (
-          <>
-            <ChartDonutMetric slices={slices} centerLabel={centerLabel} centerValue={total} />
-            {slices.length > 0 ? (
-              <ul className="mt-4 flex min-w-0 flex-col">
-                {slices.map((slice, index) => {
-                  const pct = total > 0 ? ((slice.count / total) * 100).toFixed(1) : '0'
-                  return (
-                    <li key={slice.key}>
-                      <div className="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-3 py-2">
-                        <div className="flex min-w-0 items-center gap-2.5">
-                          <span
-                            aria-hidden
-                            className="border-background size-3 shrink-0 rounded-full border-2 shadow-sm"
-                            style={{ backgroundColor: slice.color }}
-                          />
-                          <span className="truncate text-sm font-medium">{slice.label}</span>
-                        </div>
-                        <span className="text-sm font-medium tabular-nums">{slice.count}</span>
-                        <span className="text-muted-foreground/70 w-10 text-right text-xs tabular-nums">
-                          {pct}%
-                        </span>
-                      </div>
-                      {index < slices.length - 1 ? <Separator className="w-auto" /> : null}
-                    </li>
-                  )
-                })}
-              </ul>
-            ) : null}
-          </>
-        )}
-      </div>
+      {loading ? (
+        <div className="text-muted-foreground flex h-44 items-center justify-center text-sm">
+          Загрузка…
+        </div>
+      ) : (
+        <ChartDonutMetric slices={slices} centerLabel={centerLabel} centerValue={total} />
+      )}
    </PanelCard>
  )
 }
@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'

 import { DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridShell } from '@/components/data-grid-shell'
 import { StatusBadge } from '@/components/status-badge'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
@@ -49,7 +49,7 @@ export function DashboardRecentJobsGrid({
    [nameById],
  )

-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
+  const { table, filteredCount } = useClientDataGrid({
    data,
    columns,
    getSearchText: (row) => {
@@ -63,16 +63,13 @@ export function DashboardRecentJobsGrid({
  })

  return (
-    <DataGridSection
+    <DataGridShell
      table={table}
      recordCount={filteredCount}
      isLoading={isLoading}
      emptyMessage="Нет задач"
      showPagination={false}
      tableLayout={DATA_GRID_DENSE_LAYOUT}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск задач…"
    />
  )
 }
@@ -2,7 +2,7 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'

 import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
-import { DataGridSection } from '@/components/data-grid-shell'
+import { DataGridShell } from '@/components/data-grid-shell'
 import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
 import { DATA_GRID_DENSE_LAYOUT } from '@/lib/data-grid-defaults'
 import { useClientDataGrid } from '@/hooks/use-client-data-grid'
@@ -42,7 +42,7 @@ export function DashboardRecentRevisionsGrid({
    [],
  )

-  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
+  const { table, filteredCount } = useClientDataGrid({
    data,
    columns,
    getSearchText: (row) => row.id,
@@ -51,16 +51,13 @@ export function DashboardRecentRevisionsGrid({
  })

  return (
-    <DataGridSection
+    <DataGridShell
      table={table}
      recordCount={filteredCount}
      isLoading={isLoading}
      emptyMessage="Нет ревизий"
      showPagination={false}
      tableLayout={DATA_GRID_DENSE_LAYOUT}
-      searchValue={globalFilter}
-      onSearchChange={setGlobalFilter}
-      searchPlaceholder="Поиск ревизий…"
    />
  )
 }
@@ -50,7 +50,7 @@ export function DataGridShell<TData extends object>({
      loadingMessage={DATA_GRID_MESSAGES_RU.loadingMessage}
      tableLayout={tableLayout}
      tableClassNames={DATA_GRID_TABLE_CLASS_NAMES}
-      className={className}
+      className={cn('min-w-0', className)}
      onRowClick={onRowClick}
    >
      <DataGridContainer border={false}>
@@ -8,12 +8,16 @@ interface PageHeaderProps {

 export function PageHeader({ title, description, actions }: PageHeaderProps) {
  return (
-    <div className="flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
-      <div className="flex flex-col gap-1">
+    <div className="flex min-w-0 flex-col gap-2 md:flex-row md:items-start md:justify-between">
+      <div className="flex min-w-0 flex-col gap-1">
        <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
-        {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        {description ? (
+          <p className="text-muted-foreground max-w-prose text-sm break-words">{description}</p>
+        ) : null}
      </div>
-      {actions ? <div className="flex items-center gap-2">{actions}</div> : null}
+      {actions ? (
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{actions}</div>
+      ) : null}
    </div>
  )
 }
@@ -29,10 +29,10 @@ export function FrameDataGrid({
 }) {
  const hasHeader = Boolean(title || description || actions)
  return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+    <Frame dense spacing="sm" className={cn('w-full min-w-0 gap-0 p-0', className)}>
      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
        {hasHeader ? (
-          <FrameHeader className="flex-row items-start justify-between gap-3 border-b">
+          <FrameHeader className="flex-col items-stretch gap-3 border-b sm:flex-row sm:items-start sm:justify-between">
            <div className="flex min-w-0 flex-1 flex-col gap-px">
              {title ? <FrameTitle>{title}</FrameTitle> : null}
              {description ? (
@@ -305,7 +305,7 @@ export function KpiStatGrid({
  }

  return (
-    <Frame className={cn('@container w-full', className)} aria-label={ariaLabel}>
+    <Frame className={cn('@container w-full min-w-0', className)} aria-label={ariaLabel}>
      <div className={cn('grid gap-2', kpiCols(list.length || 1))}>
        {list.map((item, index) => (
          <KpiStatCardItem key={kpiStatItemKey(item, index)} item={item} />
@@ -1,11 +1,4 @@
 import type { ReactNode } from 'react'
-import {
-  Frame,
-  FrameDescription,
-  FrameHeader,
-  FramePanel,
-  FrameTitle,
-} from '@/components/reui/frame'
 import { Skeleton } from '@evobgp/ui/components/skeleton'
 import { PageHeader } from '@/components/page-header'
 import { KpiStatGrid, type KpiStatCardData } from './kpi-stat-grid'
@@ -47,9 +40,11 @@ function OpsDashboardSkeleton() {
 }

 /**
- * Ops dashboard: KPI → optional Quick Actions → charts → attention queue.
+ * Ops dashboard: KPI → optional Quick Actions → charts → queue.
+ * Queue is a sibling Frame grid — never wrap FrameDataGrid inside another Frame.
 * @see https://reui.io/preview/base/dashboard-1
 * @see https://reui.io/preview/base/stats-12
+ * @see https://reui.io/docs/components/base/frame
 */
 export function OpsDashboard({
  title = 'Панель управления',
@@ -77,21 +72,18 @@ export function OpsDashboard({

      {afterKpi ? <section aria-label="Быстрые действия">{afterKpi}</section> : null}

-      <section
-        aria-label="Аналитика"
-        className="flex min-w-0 flex-col gap-4"
-      >
+      <section aria-label="Аналитика" className="flex min-w-0 flex-col gap-4">
        {charts}
      </section>

-      <section aria-label={queueTitle}>
-        <Frame dense spacing="sm" className="w-full min-w-0">
-          <FrameHeader>
-            <FrameTitle>{queueTitle}</FrameTitle>
-            <FrameDescription>{queueDescription}</FrameDescription>
-          </FrameHeader>
-          <FramePanel>{queue}</FramePanel>
-        </Frame>
+      <section aria-label={queueTitle} className="flex min-w-0 flex-col gap-4">
+        <div className="flex min-w-0 flex-col gap-1">
+          <h2 className="text-sm font-semibold tracking-tight">{queueTitle}</h2>
+          {queueDescription ? (
+            <p className="text-muted-foreground max-w-prose text-sm">{queueDescription}</p>
+          ) : null}
+        </div>
+        {queue}
      </section>
    </div>
  )
@@ -2,7 +2,6 @@ import type { ReactNode } from 'react'
 import { Link, Outlet, useRouterState } from '@tanstack/react-router'
 import { ServerCogIcon, SettingsIcon } from 'lucide-react'

-import { useIsMobile } from '@evobgp/ui/hooks/use-mobile'
 import { cn } from '@evobgp/ui/lib/utils'
 import { PageShell } from '@/components/page-shell'
 import { PageHeader } from '@/components/page-header'
@@ -37,7 +36,8 @@ interface SettingsShellProps {
 }

 /**
- * Settings shell — Frame surface, no hairline Separator under header.
+ * Settings shell — Frame surface, settings-16 left rail.
+ * Rail stacks above content until the page container is wide enough (no viewport-only squeeze).
 * @see https://reui.io/preview/base/settings-16
 * @see https://reui.io/preview/base/settings-3
 */
@@ -46,7 +46,6 @@ export function SettingsShell({
  description,
  tabs = DEFAULT_TABS,
 }: SettingsShellProps) {
-  const isMobile = useIsMobile()
  const pathname = useRouterState({ select: (s) => s.location.pathname })
  const headerDescription =
    description ??
@@ -56,31 +55,20 @@ export function SettingsShell({

  return (
    <PageShell>
-      <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
+      <div className="@container mx-auto flex w-full min-w-0 max-w-5xl flex-col gap-5">
        <PageHeader title={title} description={headerDescription} />

-        <div
-          className={cn(
-            'flex gap-5',
-            isMobile ? 'flex-col' : 'flex-row items-start',
-          )}
-        >
+        <div className="flex min-w-0 flex-col gap-5 @3xl:flex-row @3xl:items-start">
          {tabs.length > 1 ? (
            <nav
              aria-label="Разделы настроек"
-              className={cn(
-                'flex gap-1',
-                isMobile
-                  ? 'scrollbar-none -mx-1 overflow-x-auto overflow-y-hidden pb-1'
-                  : 'w-44 shrink-0 flex-col',
-              )}
+              className="scrollbar-none flex min-w-0 gap-1 overflow-x-auto @3xl:w-44 @3xl:shrink-0 @3xl:flex-col @3xl:overflow-visible"
            >
              {tabs.map((tab) => {
                const isActive = pathname.startsWith(tab.to)
                const className = cn(
-                  'flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
-                  isMobile && 'shrink-0',
-                  !isMobile && 'w-full',
+                  'flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm transition-colors',
+                  '@3xl:w-full',
                  isActive
                    ? 'bg-muted text-foreground font-medium shadow-sm ring-1 ring-border/60'
                    : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground',
@@ -44,7 +44,7 @@ export function AppearanceSettingsTab() {
  })

  return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
      <SettingsCard
        title="Тема интерфейса"
        description="Быстрый переключатель также доступен в боковой панели"
@@ -61,6 +61,7 @@ export function AppearanceSettingsTab() {
                мгновенно
              </Badge>
            }
+            stacked
            last
          >
            <ToggleGroup
@@ -72,7 +73,7 @@ export function AppearanceSettingsTab() {
              variant="outline"
              size="sm"
              aria-label="Тема интерфейса"
-              className="w-full sm:w-auto"
+              className="w-full min-w-0"
            >
              {THEME_OPTIONS.map((option) => {
                const Icon = option.icon
@@ -1,6 +1,6 @@
 import { Link, useNavigate } from '@tanstack/react-router'
 import { useQueryClient } from '@tanstack/react-query'
-import { Save } from 'lucide-react'
+import { KeyRound, Save } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'

@@ -8,6 +8,7 @@ import { SettingRow } from '@/components/settings/setting-row'
 import { SettingsCard } from '@/components/settings/settings-card'
 import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
 import { Badge } from '@/components/reui/badge'
+import { Alert, AlertDescription, AlertTitle } from '@/components/reui/alert'
 import { LoadingButton } from '@/components/loading-button'
 import {
  DEV_API_TOKEN,
@@ -16,7 +17,6 @@ import {
  TOKEN_STORAGE_KEY,
 } from '@/lib/api-client'
 import { authKeys } from '@/queries/auth'
-import { Alert, AlertDescription } from '@evobgp/ui/components/alert'
 import { Button } from '@evobgp/ui/components/button'
 import { Input } from '@evobgp/ui/components/input'

@@ -50,12 +50,13 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
  }

  return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
      {tokenRequired ? (
-        <Alert>
+        <Alert variant="warning">
+          <KeyRound aria-hidden />
+          <AlertTitle>Нужен API-токен</AlertTitle>
          <AlertDescription>
-            Для доступа к разделу нужен API-токен. Сохраните токен ниже или нажмите «Использовать
-            dev».
+            Сохраните токен ниже или нажмите «Использовать dev».
          </AlertDescription>
        </Alert>
      ) : null}
@@ -64,7 +65,7 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
        title="Подключение к API"
        description="Токен хранится только в этом браузере (localStorage)"
        footer={
-          <div className="flex w-full flex-wrap justify-end gap-2">
+          <div className="flex w-full min-w-0 flex-wrap justify-end gap-2">
            <Button type="button" variant="outline" onClick={useDevToken}>
              Использовать dev
            </Button>
@@ -83,8 +84,7 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
            title="Токен для запросов"
            description={
              <>
-                Ключ для заголовка <code className="text-xs">Authorization</code>. Управление
-                ключами tenant — в разделе{' '}
+                Ключ для заголовка Authorization. Управление ключами tenant — в разделе{' '}
                <Link to="/access" className="text-primary underline-offset-4 hover:underline">
                  Права доступа
                </Link>
@@ -97,12 +97,14 @@ export function ConnectionSettingsTab({ tokenRequired }: { tokenRequired: boolea
              </Badge>
            }
            labelFor="settings-token"
+            stacked
            last
          >
            <Input
              id="settings-token"
              type="password"
              autoComplete="off"
+              className="w-full min-w-0"
              value={token}
              onChange={(e) => setTokenValue(e.target.value)}
              placeholder="dev или API-ключ"
@@ -49,7 +49,7 @@ const ADMIN_SECTIONS = [

 export function SectionsSettingsTab() {
  return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
      <SettingsCard
        title="Разделы control plane"
        description="Параметры tenant и операции — отдельно от настроек браузера"
@@ -58,7 +58,7 @@ export function SectionsSettingsTab() {
          {ADMIN_SECTIONS.map((section, index) => (
            <Fragment key={section.id}>
              {index > 0 ? <ItemSeparator className="my-0" /> : null}
-              <Item className="min-h-0 items-center gap-4 px-5 py-3.5">
+              <Item className="min-h-0 min-w-0 flex-wrap items-center gap-4 px-5 py-3.5">
                <ItemMedia className="self-center!">
                  <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
                    {section.icon}
@@ -66,7 +66,7 @@ export function SectionsSettingsTab() {
                </ItemMedia>

                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
-                  <ItemTitle className="gap-2 leading-5">
+                  <ItemTitle className="flex min-w-0 flex-wrap items-center gap-2 leading-5">
                    {section.title}
                    <Badge variant={section.badge.variant} size="xs">
                      {section.badge.label}
@@ -35,7 +35,7 @@ export function SessionSettingsTab() {
  })

  return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6">
      <SettingsCard title="Текущая сессия" description="Проверка токена через GET /v1/auth/session">
        <QueryState
          data={sessionQ.data}
@@ -58,7 +58,7 @@ export function SessionSettingsTab() {
                </ItemMedia>

                <ItemContent className="min-w-0 justify-center gap-0.5 self-center">
-                  <ItemTitle className="gap-2 leading-5">
+                  <ItemTitle className="flex min-w-0 flex-wrap items-center gap-2 leading-5">
                    Этот браузер
                    <Badge variant="success-light" size="xs">
                      Активна
@@ -66,7 +66,9 @@ export function SessionSettingsTab() {
                  </ItemTitle>
                  <ItemDescription className="leading-5">
                    Tenant:{' '}
-                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
+                    <code className="text-foreground font-mono text-xs break-all">
+                      {session.tenant_id}
+                    </code>
                  </ItemDescription>
                </ItemContent>
              </Item>
@@ -94,12 +96,13 @@ export function SessionSettingsTab() {
                </Badge>
              )
            }
+            stacked
            last
          >
            {sessionQ.data ? (
-              <p className="text-muted-foreground text-sm">
+              <p className="text-muted-foreground text-sm break-words">
                Ключ с ролью <strong>{sessionQ.data.role}</strong> в tenant{' '}
-                <code className="font-mono text-xs">{sessionQ.data.tenant_id}</code>.
+                <code className="font-mono text-xs break-all">{sessionQ.data.tenant_id}</code>.
              </p>
            ) : (
              <p className="text-muted-foreground text-sm">
@@ -10,31 +10,59 @@ import {
  FieldTitle,
 } from '@evobgp/ui/components/field'

-interface SettingRowProps {
+export interface SettingRowProps {
  title: string
  description?: ReactNode
  children: ReactNode
  last?: boolean
+  /** Opt-in FieldSeparator after the row (default off — ReUI settings use Frame+gap). */
+  separated?: boolean
+  compact?: boolean
+  stacked?: boolean
  labelFor?: string
  contentClassName?: string
+  className?: string
  titleAddon?: ReactNode
 }

-/** Settings row — settings-3 DNA. Preview: https://reui.io/preview/base/settings-3 */
+/**
+ * Settings row — settings-3 / settings-16 DNA.
+ * Control is flex-1 + min-w-0 (never a fixed w-78) so label and input do not overlap.
+ * @see https://reui.io/preview/base/settings-3
+ * @see https://reui.io/preview/base/settings-16
+ */
 export function SettingRow({
  title,
  description,
  children,
  last,
+  separated = false,
+  compact,
+  stacked,
  labelFor,
  contentClassName,
+  className,
  titleAddon,
 }: SettingRowProps) {
  return (
    <>
-      <Field orientation="responsive" className="gap-4 px-5 py-3">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
-          <div className="flex flex-wrap items-center gap-2">
+      <Field
+        orientation={stacked ? 'vertical' : 'responsive'}
+        className={cn(
+          'min-w-0 gap-4 px-5 py-3.5',
+          !stacked &&
+            '@md/field-group:items-start @md/field-group:*:min-w-0 @md/field-group:*:max-w-full',
+          !last && !separated && 'border-border/40 border-b',
+          className,
+        )}
+      >
+        <div
+          className={cn(
+            'flex min-w-0 flex-1 flex-col gap-0.5',
+            !stacked && '@md/field-group:max-w-sm',
+          )}
+        >
+          <div className="flex min-w-0 flex-wrap items-center gap-2">
            {labelFor ? (
              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
            ) : (
@@ -44,20 +72,33 @@ export function SettingRow({
          </div>

          {description ? (
-            <FieldDescription>{description}</FieldDescription>
+            <FieldDescription className="text-sm break-words">{description}</FieldDescription>
          ) : null}
        </div>

        <FieldContent
-          className={cn('min-w-0 @md/field-group:w-78', contentClassName)}
+          className={cn(
+            'w-full min-w-0 @md/field-group:flex-1',
+            stacked
+              ? 'max-w-none'
+              : compact
+                ? '@md/field-group:max-w-[17rem] @md/field-group:shrink-0'
+                : '@md/field-group:max-w-[min(100%,34rem)]',
+            contentClassName,
+          )}
        >
-          <div className="flex w-full justify-start @md/field-group:justify-end">
+          <div
+            className={cn(
+              'flex w-full min-w-0 justify-start',
+              stacked ? 'justify-start' : '@md/field-group:justify-end',
+            )}
+          >
            {children}
          </div>
        </FieldContent>
      </Field>

-      {!last ? <FieldSeparator /> : null}
+      {separated && !last ? <FieldSeparator /> : null}
    </>
  )
 }
@@ -31,7 +31,7 @@ export function SettingsCard({
  footerClassName,
 }: SettingsCardProps) {
  return (
-    <Frame dense spacing="sm" className={cn('w-full gap-0 p-0', className)}>
+    <Frame dense spacing="sm" className={cn('w-full min-w-0 gap-0 p-0', className)}>
      <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
        <FrameHeader className="gap-0 border-b px-5 py-3">
          <FrameTitle>{title}</FrameTitle>
@@ -1,17 +1,9 @@
 import { type ComponentProps, type ReactNode } from 'react'

 import { Badge } from '@/components/reui/badge'
-import { cn } from '@evobgp/ui/lib/utils'
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-  FieldSeparator,
-  FieldTitle,
-} from '@evobgp/ui/components/field'
+import { SettingRow } from '@/components/settings/setting-row'

-/** settings-3 row pattern for tenant/UI settings. */
+/** Tenant settings row — same SettingRow DNA as UI settings. */
 export function SettingsSettingField({
  title,
  description,
@@ -20,38 +12,34 @@ export function SettingsSettingField({
  last,
  labelFor,
  contentClassName,
+  stacked,
 }: {
  title: string
-  description: ReactNode
+  description?: ReactNode
  badge?: { label: string; variant: ComponentProps<typeof Badge>['variant'] }
  children: ReactNode
  last?: boolean
  labelFor?: string
  contentClassName?: string
+  stacked?: boolean
 }) {
  return (
-    <>
-      <Field orientation="responsive" className="gap-4 px-4 py-4">
-        <div className="flex min-w-0 flex-1 flex-col gap-0.5 @md/field-group:max-w-sm">
-          <div className="flex flex-wrap items-center gap-2">
-            {labelFor ? (
-              <FieldLabel htmlFor={labelFor}>{title}</FieldLabel>
-            ) : (
-              <FieldTitle>{title}</FieldTitle>
-            )}
-            {badge ? (
-              <Badge variant={badge.variant} size="sm">
-                {badge.label}
-              </Badge>
-            ) : null}
-          </div>
-          <FieldDescription className="text-xs">{description}</FieldDescription>
-        </div>
-        <FieldContent className={cn('min-w-0 @md/field-group:w-78', contentClassName)}>
-          {children}
-        </FieldContent>
-      </Field>
-      {!last ? <FieldSeparator /> : null}
-    </>
+    <SettingRow
+      title={title}
+      description={description}
+      last={last}
+      labelFor={labelFor}
+      contentClassName={contentClassName}
+      stacked={stacked}
+      titleAddon={
+        badge ? (
+          <Badge variant={badge.variant} size="sm">
+            {badge.label}
+          </Badge>
+        ) : null
+      }
+    >
+      {children}
+    </SettingRow>
  )
 }
@@ -4,12 +4,12 @@ import { Save } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { toast } from 'sonner'

-import { PanelCard } from '@/components/panel-card'
 import { Input } from '@evobgp/ui/components/input'
-import { Label } from '@evobgp/ui/components/label'
 import { BadgeTabs, TabsContent } from '@/components/badge-tabs'
 import { FrameDataGrid } from '@/components/reui-kit'
-import { SelectField } from '@/components/select-field'
+import { SelectMenu } from '@/components/select-field'
+import { SettingsCard } from '@/components/settings/settings-card'
+import { SettingsFieldGroup } from '@/components/settings/settings-field-group'
 import { SettingsKvGrid } from '@/components/settings/settings-kv-grid'
 import { SettingsSettingField } from '@/components/settings/settings-setting-field'
 import { QueryState } from '@/components/query-state'
@@ -114,7 +114,7 @@ function TenantSettingsComponent() {
  }

  return (
-    <div className="flex flex-col gap-6">
+    <div className="flex min-w-0 flex-col gap-6">
      <BadgeTabs
        value={search.tab}
        onValueChange={(tab) =>
@@ -130,90 +130,104 @@ function TenantSettingsComponent() {
        ]}
      >
        <TabsContent value="bird" className="mt-0">
-          <PanelCard
+          <SettingsCard
            title="BIRD control plane"
-            description={
-              <>
-                Глобальные параметры BIRD для pipeline refresh/apply. Сохранение через{' '}
-                <code className="text-xs">PATCH /v1/settings</code> (роль operator).
-              </>
+            description="Глобальные параметры BIRD для pipeline refresh/apply. Сохранение — роль operator."
+            footer={
+              <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
+                <Save />
+                Сохранить
+              </LoadingButton>
            }
-            contentClassName="space-y-4 py-4"
          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-64" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="flex flex-col">
-                    {BIRD_SETTING_KEYS.map((key, index) => (
-                      <SettingsSettingField
-                        key={key}
-                        title={BIRD_LABELS[key]}
-                        description={BIRD_HINTS[key] ?? key}
-                        labelFor={key}
-                        badge={{ label: 'BIRD', variant: 'info-light' }}
-                        last={index === BIRD_SETTING_KEYS.length - 1}
-                      >
-                        {key === 'peer_discovery_enabled' ||
-                        key === 'peer_discovery_require_external' ? (
-                          <SelectField
-                            id={key}
-                            items={[...BIRD_BOOL_ITEMS]}
-                            value={birdForm[key] || 'false'}
-                            onValueChange={(v) =>
-                              setBirdForm((s) => ({ ...s, [key]: v || 'false' }))
-                            }
-                            placeholder="Выкл"
-                          />
-                        ) : (
-                          <Input
-                            id={key}
-                            value={birdForm[key] ?? ''}
-                            onChange={(e) =>
-                              setBirdForm((s) => ({ ...s, [key]: e.target.value }))
-                            }
-                            placeholder={BIRD_LABELS[key]}
-                          />
-                        )}
-                      </SettingsSettingField>
-                    ))}
-                    <div className="px-4 py-4">
-                      <LoadingButton onClick={saveBird} loading={patchMutation.isPending}>
-                        <Save />
-                        Сохранить
-                      </LoadingButton>
-                    </div>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
+            <QueryState
+              data={partitioned}
+              isLoading={settingsQ.isLoading}
+              isError={settingsQ.isError}
+              error={settingsQ.error}
+              skeleton={<div className="h-64" />}
+              onRetry={() => settingsQ.refetch()}
+            >
+              {() => (
+                <SettingsFieldGroup
+                  legend="BIRD"
+                  description="Параметры демона и автообнаружения пиров."
+                >
+                  {BIRD_SETTING_KEYS.map((key, index) => (
+                    <SettingsSettingField
+                      key={key}
+                      title={BIRD_LABELS[key]}
+                      description={BIRD_HINTS[key]}
+                      labelFor={key}
+                      badge={{ label: 'BIRD', variant: 'info-light' }}
+                      stacked
+                      last={index === BIRD_SETTING_KEYS.length - 1}
+                    >
+                      {key === 'peer_discovery_enabled' ||
+                      key === 'peer_discovery_require_external' ? (
+                        <SelectMenu
+                          id={key}
+                          items={[...BIRD_BOOL_ITEMS]}
+                          value={birdForm[key] || 'false'}
+                          onValueChange={(v) =>
+                            setBirdForm((s) => ({ ...s, [key]: v || 'false' }))
+                          }
+                          placeholder="Выкл"
+                        />
+                      ) : (
+                        <Input
+                          id={key}
+                          className="w-full min-w-0"
+                          value={birdForm[key] ?? ''}
+                          onChange={(e) =>
+                            setBirdForm((s) => ({ ...s, [key]: e.target.value }))
+                          }
+                          placeholder={BIRD_LABELS[key]}
+                        />
+                      )}
+                    </SettingsSettingField>
+                  ))}
+                </SettingsFieldGroup>
+              )}
+            </QueryState>
+          </SettingsCard>
        </TabsContent>

        <TabsContent value="revision" className="mt-0">
-          <PanelCard
+          <SettingsCard
            title="Ревизии"
            description="Время хранения ревизий в БД"
-            contentClassName="space-y-4 py-4"
+            footer={
+              <LoadingButton onClick={saveRevision} loading={patchMutation.isPending}>
+                <Save />
+                Сохранить
+              </LoadingButton>
+            }
          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-32" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="flex max-w-sm flex-col gap-1.5">
-                    <Label htmlFor="revision_retention_minutes">Retention (минуты)</Label>
+            <QueryState
+              data={partitioned}
+              isLoading={settingsQ.isLoading}
+              isError={settingsQ.isError}
+              error={settingsQ.error}
+              skeleton={<div className="h-32" />}
+              onRetry={() => settingsQ.refetch()}
+            >
+              {() => (
+                <SettingsFieldGroup
+                  legend="Retention"
+                  description="Срок хранения ревизий в минутах."
+                >
+                  <SettingsSettingField
+                    title="Retention"
+                    description="Сколько минут хранить ревизии конфигурации."
+                    labelFor="revision_retention_minutes"
+                    stacked
+                    last
+                  >
                    <Input
                      id="revision_retention_minutes"
                      type="number"
+                      className="w-full min-w-0"
                      value={revisionForm.revision_retention_minutes ?? ''}
                      onChange={(e) =>
                        setRevisionForm((s) => ({
@@ -222,45 +236,46 @@ function TenantSettingsComponent() {
                        }))
                      }
                    />
-                    <p className="font-mono text-xs text-muted-foreground">
-                      revision_retention_minutes
-                    </p>
-                    <LoadingButton
-                      className="mt-2 w-fit"
-                      onClick={saveRevision}
-                      loading={patchMutation.isPending}
-                    >
-                      <Save />
-                      Сохранить
-                    </LoadingButton>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
+                  </SettingsSettingField>
+                </SettingsFieldGroup>
+              )}
+            </QueryState>
+          </SettingsCard>
        </TabsContent>

        <TabsContent value="runtime-logs" className="mt-0">
-          <PanelCard
+          <SettingsCard
            title="Файловые логи"
            description="Автоматическая очистка логов"
-            contentClassName="space-y-4 py-4"
+            footer={
+              <LoadingButton onClick={saveRuntimeLogs} loading={patchMutation.isPending}>
+                <Save />
+                Сохранить
+              </LoadingButton>
+            }
          >
-              <QueryState
-                data={partitioned}
-                isLoading={settingsQ.isLoading}
-                isError={settingsQ.isError}
-                error={settingsQ.error}
-                skeleton={<div className="h-48" />}
-                onRetry={() => settingsQ.refetch()}
-              >
-                {() => (
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <SelectField
-                      label="Авто-очистка включена"
+            <QueryState
+              data={partitioned}
+              isLoading={settingsQ.isLoading}
+              isError={settingsQ.isError}
+              error={settingsQ.error}
+              skeleton={<div className="h-48" />}
+              onRetry={() => settingsQ.refetch()}
+            >
+              {() => (
+                <SettingsFieldGroup
+                  legend="Авто-очистка"
+                  description="Расписание и лимиты файловых логов runtime."
+                >
+                  <SettingsSettingField
+                    title="Авто-очистка"
+                    description="Включить периодическую очистку файловых логов."
+                    stacked
+                  >
+                    <SelectMenu
                      items={[...RUNTIME_LOGS_ENABLED_ITEMS]}
                      value={runtimeLogsForm.runtime_logs_auto_enabled ?? 'false'}
                      placeholder="Выберите"
-                      description="runtime_logs_auto_enabled"
                      onValueChange={(v) =>
                        v &&
                        setRuntimeLogsForm((s) => ({
@@ -269,45 +284,54 @@ function TenantSettingsComponent() {
                        }))
                      }
                    />
-                    <div className="flex flex-col gap-1.5">
-                      <Label htmlFor="runtime_logs_max_file_mb">Макс. размер файла (MB)</Label>
-                      <Input
-                        id="runtime_logs_max_file_mb"
-                        type="number"
-                        value={runtimeLogsForm.runtime_logs_max_file_mb ?? ''}
-                        onChange={(e) =>
-                          setRuntimeLogsForm((s) => ({
-                            ...s,
-                            runtime_logs_max_file_mb: e.target.value,
-                          }))
-                        }
-                      />
-                      <p className="font-mono text-xs text-muted-foreground">
-                        runtime_logs_max_file_mb
-                      </p>
-                    </div>
-                    <div className="flex flex-col gap-1.5">
-                      <Label htmlFor="runtime_logs_auto_schedule">Расписание (cron)</Label>
-                      <Input
-                        id="runtime_logs_auto_schedule"
-                        value={runtimeLogsForm.runtime_logs_auto_schedule ?? ''}
-                        onChange={(e) =>
-                          setRuntimeLogsForm((s) => ({
-                            ...s,
-                            runtime_logs_auto_schedule: e.target.value,
-                          }))
-                        }
-                      />
-                      <p className="font-mono text-xs text-muted-foreground">
-                        runtime_logs_auto_schedule
-                      </p>
-                    </div>
-                    <SelectField
-                      label="Режим очистки"
+                  </SettingsSettingField>
+                  <SettingsSettingField
+                    title="Макс. размер файла"
+                    description="Порог в мегабайтах, после которого срабатывает очистка."
+                    labelFor="runtime_logs_max_file_mb"
+                    stacked
+                  >
+                    <Input
+                      id="runtime_logs_max_file_mb"
+                      type="number"
+                      className="w-full min-w-0"
+                      value={runtimeLogsForm.runtime_logs_max_file_mb ?? ''}
+                      onChange={(e) =>
+                        setRuntimeLogsForm((s) => ({
+                          ...s,
+                          runtime_logs_max_file_mb: e.target.value,
+                        }))
+                      }
+                    />
+                  </SettingsSettingField>
+                  <SettingsSettingField
+                    title="Расписание"
+                    description="Cron-выражение для авто-очистки."
+                    labelFor="runtime_logs_auto_schedule"
+                    stacked
+                  >
+                    <Input
+                      id="runtime_logs_auto_schedule"
+                      className="w-full min-w-0"
+                      value={runtimeLogsForm.runtime_logs_auto_schedule ?? ''}
+                      onChange={(e) =>
+                        setRuntimeLogsForm((s) => ({
+                          ...s,
+                          runtime_logs_auto_schedule: e.target.value,
+                        }))
+                      }
+                    />
+                  </SettingsSettingField>
+                  <SettingsSettingField
+                    title="Режим очистки"
+                    description="Обнулить файл или удалить его."
+                    stacked
+                    last
+                  >
+                    <SelectMenu
                      items={[...RUNTIME_LOGS_MODE_ITEMS]}
                      value={runtimeLogsForm.runtime_logs_auto_mode ?? ''}
                      placeholder="Выберите"
-                      description="runtime_logs_auto_mode"
                      onValueChange={(v) =>
                        v &&
                        setRuntimeLogsForm((s) => ({
@@ -316,16 +340,11 @@ function TenantSettingsComponent() {
                        }))
                      }
                    />
-                    <div className="md:col-span-2">
-                      <LoadingButton onClick={saveRuntimeLogs} loading={patchMutation.isPending}>
-                        <Save />
-                        Сохранить
-                      </LoadingButton>
-                    </div>
-                  </div>
-                )}
-              </QueryState>
-          </PanelCard>
+                  </SettingsSettingField>
+                </SettingsFieldGroup>
+              )}
+            </QueryState>
+          </SettingsCard>
        </TabsContent>

        <TabsContent value="additional" className="mt-0">
@@ -1,15 +1,23 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { KeyRound, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
+import { KeyRound, MonitorIcon, RefreshCw, ShieldCheck, ShieldOff } from 'lucide-react'
 import { useMemo } from 'react'

 import { Button } from '@evobgp/ui/components/button'
-import { PanelCard } from '@/components/panel-card'
+import {
+  Item,
+  ItemContent,
+  ItemDescription,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from '@evobgp/ui/components/item'

 import { AccessApiKeysCard } from '@/components/access/access-api-keys-card'
 import { PageHeader } from '@/components/page-header'
 import { Badge } from '@/components/reui/badge'
 import { KpiStatGrid, type KpiStatItem } from '@/components/reui-kit'
+import { SettingsCard } from '@/components/settings/settings-card'
 import { SectionCardsSkeleton } from '@/components/skeletons'
 import { sessionCanManageApiKeys } from '@/lib/auth'
 import { authSessionQueryOptions } from '@/queries/auth'
@@ -38,6 +46,7 @@ function AccessComponent() {
  const kpiItems: KpiStatItem[] = useMemo(
    () => [
      {
+        id: 'keys-total',
        label: 'Всего ключей',
        value: keys.length,
        icon: <KeyRound className="size-4" />,
@@ -48,6 +57,7 @@ function AccessComponent() {
        ),
      },
      {
+        id: 'keys-active',
        label: 'Активных',
        value: activeCount,
        icon: <ShieldCheck className="size-4" />,
@@ -58,6 +68,7 @@ function AccessComponent() {
        ),
      },
      {
+        id: 'keys-revoked',
        label: 'Отозванных',
        value: revokedCount,
        icon: <ShieldOff className="size-4" />,
@@ -93,7 +104,7 @@ function AccessComponent() {
  })()

  return (
-    <div className="flex flex-col gap-6">
+    <div className="flex min-w-0 flex-col gap-6">
      <PageHeader
        title="Права доступа"
        description="API-ключи control plane и текущая сессия Bearer-токена."
@@ -108,47 +119,55 @@ function AccessComponent() {
      />

      {session ? (
-        <PanelCard
+        <SettingsCard
          title="Текущая сессия"
          description="Tenant и права текущего Bearer (API-ключ или portal JWT)."
-          contentClassName="grid gap-3 py-4 text-sm sm:grid-cols-2"
        >
-          <div>
-            <p className="text-muted-foreground">Tenant</p>
-            <p className="break-all font-mono text-xs">{session.tenant_id}</p>
-          </div>
-          <div>
-            <p className="text-muted-foreground">Доступ</p>
-            <p className="font-mono text-xs">{sessionAccessLabel}</p>
-          </div>
-          {sessionKindLabel ? (
-            <div>
-              <p className="text-muted-foreground">Тип</p>
-              <p className="font-mono text-xs">{sessionKindLabel}</p>
-            </div>
-          ) : null}
-          {session.email ? (
-            <div>
-              <p className="text-muted-foreground">Email</p>
-              <p className="break-all text-xs">{session.email}</p>
-            </div>
-          ) : null}
-        </PanelCard>
+          <ItemGroup className="gap-0">
+            <Item className="min-h-0 min-w-0 items-start gap-4 px-5 py-3.5">
+              <ItemMedia className="self-start">
+                <Item className="bg-muted/60 border-background flex size-8 shrink-0 items-center justify-center border-2 p-0 shadow-[0_1px_3px_0_rgba(0,0,0,0.14)] [&_svg]:size-4 [&_svg]:opacity-60">
+                  <MonitorIcon aria-hidden="true" />
+                </Item>
+              </ItemMedia>
+              <ItemContent className="min-w-0 gap-3">
+                <div className="flex min-w-0 flex-wrap items-center gap-2">
+                  <ItemTitle className="leading-5">Этот браузер</ItemTitle>
+                  {sessionKindLabel ? (
+                    <Badge variant="info-light" size="sm">
+                      {sessionKindLabel}
+                    </Badge>
+                  ) : null}
+                </div>
+                <ItemDescription className="flex min-w-0 flex-col gap-1 leading-5">
+                  <span className="break-all">
+                    Tenant:{' '}
+                    <code className="text-foreground font-mono text-xs">{session.tenant_id}</code>
+                  </span>
+                  <span className="break-words">Доступ: {sessionAccessLabel}</span>
+                  {session.email ? <span className="break-all">Email: {session.email}</span> : null}
+                </ItemDescription>
+              </ItemContent>
+            </Item>
+          </ItemGroup>
+        </SettingsCard>
      ) : (
-        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          Не удалось определить сессию. Укажите токен в{' '}
-          <Link
-            to="/settings"
-            search={{ tab: 'connection' }}
-            className="text-primary underline-offset-4 hover:underline"
-          >
-            настройках
-          </Link>{' '}
-          (для dev-окружения — <code className="text-xs">dev</code> при включённом demo-seed).
-          {sessionQuery.isError && sessionQuery.error instanceof Error ? (
-            <span className="mt-2 block text-destructive">{sessionQuery.error.message}</span>
-          ) : null}
-        </PanelCard>
+        <SettingsCard title="Текущая сессия">
+          <p className="text-muted-foreground px-5 py-4 text-sm">
+            Не удалось определить сессию. Укажите токен в{' '}
+            <Link
+              to="/settings"
+              search={{ tab: 'connection' }}
+              className="text-primary underline-offset-4 hover:underline"
+            >
+              настройках
+            </Link>{' '}
+            (для dev-окружения — <code className="text-xs">dev</code> при включённом demo-seed).
+            {sessionQuery.isError && sessionQuery.error instanceof Error ? (
+              <span className="text-destructive mt-2 block">{sessionQuery.error.message}</span>
+            ) : null}
+          </p>
+        </SettingsCard>
      )}

      {canManageKeys ? (
@@ -167,11 +186,13 @@ function AccessComponent() {
          />
        </>
      ) : session ? (
-        <PanelCard contentClassName="py-4 text-sm text-muted-foreground">
-          Управление API-ключами доступно роли <strong>operator</strong> (API-ключ) или portal JWT
-          с <strong>is_admin</strong> / правом <code className="text-xs">bgp:access:admin</code>.
-          Текущий доступ: <span className="font-mono">{sessionAccessLabel}</span>.
-        </PanelCard>
+        <SettingsCard title="API-ключи">
+          <p className="text-muted-foreground px-5 py-4 text-sm break-words">
+            Управление API-ключами доступно роли <strong>operator</strong> (API-ключ) или portal JWT
+            с <strong>is_admin</strong> / правом <code className="text-xs">bgp:access:admin</code>.
+            Текущий доступ: <span className="font-mono">{sessionAccessLabel}</span>.
+          </p>
+        </SettingsCard>
      ) : null}
    </div>
  )
@@ -7,7 +7,6 @@ import { Button } from '@evobgp/ui/components/button'
 import { Skeleton } from '@evobgp/ui/components/skeleton'

 import { DashboardActivityTimeline } from '@/components/dashboard/dashboard-activity-timeline'
-import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
 import { buildDashboardKpiCards } from '@/components/dashboard/dashboard-kpi-grid'
 import { DashboardModulesGrid } from '@/components/dashboard/dashboard-modules-grid'
 import { DashboardNetworkHealth } from '@/components/dashboard/dashboard-network-health'
@@ -15,7 +14,7 @@ import { DashboardOperationsBreakdown } from '@/components/dashboard/dashboard-o
 import { DashboardQuickLinks } from '@/components/dashboard/dashboard-quick-links'
 import { DashboardRecentJobsGrid } from '@/components/dashboard/dashboard-recent-jobs-grid'
 import { DashboardRecentRevisionsGrid } from '@/components/dashboard/dashboard-recent-revisions-grid'
-import { OpsDashboard } from '@/components/reui-kit'
+import { FrameDataGrid, OpsDashboard } from '@/components/reui-kit'
 import { chartPanelGridClassName, dashboardMainSidebarClassName } from '@/lib/ui-surface'
 import {
  moduleNameById,
@@ -111,7 +110,7 @@ function DashboardComponent() {
              peers={peers}
              speakers={speakers}
            />
-            <div className="grid min-w-0 gap-4">
+            <div className="grid min-w-0 items-start gap-4">
              <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
              <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
            </div>
@@ -122,28 +121,26 @@ function DashboardComponent() {
      queueDescription="Последние фоновые операции и история конфигураций"
      queue={
        <div className={chartPanelGridClassName}>
-          <DashboardFramePanel
+          <FrameDataGrid
            title="Недавние задачи"
            description="Последние фоновые операции"
-            className="h-full min-w-0"
          >
            {activityLoading ? (
              <Skeleton className="m-4 h-24 w-auto" />
            ) : (
-              <DashboardRecentJobsGrid jobs={jobs.slice(0, 10)} nameById={nameById} isLoading={refreshing} />
+              <DashboardRecentJobsGrid jobs={jobs.slice(0, 8)} nameById={nameById} isLoading={refreshing} />
            )}
-          </DashboardFramePanel>
-          <DashboardFramePanel
+          </FrameDataGrid>
+          <FrameDataGrid
            title="Последние ревизии"
            description="История конфигураций"
-            className="h-full min-w-0"
          >
            {activityLoading ? (
              <Skeleton className="m-4 h-24 w-auto" />
            ) : (
              <DashboardRecentRevisionsGrid revisions={revisions} isLoading={refreshing} />
            )}
-          </DashboardFramePanel>
+          </FrameDataGrid>
        </div>
      }
    />
@@ -24,12 +24,13 @@ function Tabs({
 }

 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
  {
    variants: {
      variant: {
-        default: "bg-muted",
-        line: "gap-1 border-b border-border bg-transparent",
+        default:
+          "bg-muted p-[3px] group-data-[orientation=horizontal]/tabs:h-9",
+        line: "h-auto gap-1 overflow-visible border-b border-border bg-transparent p-0",
      },
    },
    defaultVariants: {
@@ -58,10 +59,12 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
    <TabsPrimitive.Tab
      data-slot="tabs-trigger"
      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "relative inline-flex items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=default]/tabs-list:h-[calc(100%-1px)] group-data-[variant=default]/tabs-list:flex-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm",
+        "group-data-[variant=line]/tabs-list:h-auto group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:py-1.5 group-data-[variant=line]/tabs-list:shadow-none group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=line]/tabs-list:data-active:shadow-none dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "group-data-[variant=default]/tabs-list:data-active:bg-background group-data-[variant=default]/tabs-list:data-active:text-foreground dark:group-data-[variant=default]/tabs-list:data-active:border-input dark:group-data-[variant=default]/tabs-list:data-active:bg-input/30 dark:group-data-[variant=default]/tabs-list:data-active:text-foreground",
+        "data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-0 group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
        className
      )}
      {...props}
Author	SHA1	Message	Date
Denozordec	dfc33dcb99	refactor(web): streamline dashboard and tab components for improved layout CI / changes (push) Successful in 8s Details CI / commitlint (push) Skipped Details CI / go (push) Skipped Details CI / bird2 (push) Skipped Details CI / openapi (push) Successful in 40s Details CI / web (push) Successful in 57s Details CI / release (push) Successful in 4m24s Details Refactored various dashboard components and tab structures to enhance layout and responsiveness. Adjusted class names to include 'min-w-0' for better overflow handling and improved alignment. Updated the ChartDonutMetric to include a tooltip for better data representation. Simplified the DashboardRecentJobsGrid and DashboardRecentRevisionsGrid by replacing DataGridSection with DataGridShell for consistency. Enhanced the OpsDashboard layout for better clarity and usability.	2026-08-18 16:03:52 +07:00
Denozordec	44f70443c3	refactor(web): improve layout and responsiveness of settings components CI / changes (push) Successful in 8s Details CI / commitlint (push) Skipped Details CI / go (push) Skipped Details CI / bird2 (push) Skipped Details CI / openapi (push) Successful in 53s Details CI / web (push) Successful in 1m16s Details CI / release (push) Successful in 4m24s Details Enhanced various settings components by adding 'min-w-0' class for better overflow handling and adjusting flex properties for improved alignment. Updated card and grid structures to ensure a cohesive user experience across the settings interface. Refined descriptions and layout in several settings tabs for better clarity and usability.	2026-08-18 01:19:42 +07:00