refactor(web): enhance layout and styling for dashboard components

Updated various dashboard components to improve layout and responsiveness. Adjusted class names to include 'min-w-0' for better handling of overflow and added flex properties to ensure proper alignment. Refined grid structures and skeleton loading states for a more cohesive user experience.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/analytics/network-overview-analytics-card.tsx

@@ -51,7 +51,7 @@ export function NetworkOverviewAnalyticsCard({
           label: 'Offline',
           percent: 100 - speakersPct,
         }}
-        footer={`Пиры Established: ${net.peersEstablished}/${net.peersEnabled}`}
+        footer={`Пиры установлены: ${net.peersEstablished}/${net.peersEnabled}`}
       />
     </div>
   )

apps/web/src/components/dashboard/dashboard-activity-timeline.tsx

@@ -50,7 +50,7 @@ export function DashboardActivityTimeline({
     <DashboardFramePanel
       title="Недавняя активность"
       description="Задачи, ревизии и сетевые события"
-      className="h-full"
+      className="h-full min-w-0"
     >
       {loading ? (
         <p className="text-muted-foreground px-4 py-6 text-sm">Загрузка…</p>
@@ -82,7 +82,7 @@ export function DashboardActivityTimeline({
                     </TimelineIndicator>
                   </TimelineHeader>
                   <TimelineContent className="min-w-0 pb-1 text-foreground">
-                    <TimelineTitle className="text-sm leading-snug font-normal">
+                    <TimelineTitle className="text-sm leading-snug font-normal break-words">
                       {item.message}
                     </TimelineTitle>
                     <div className="mt-2">

apps/web/src/components/dashboard/dashboard-kpi-grid.tsx

@@ -82,7 +82,7 @@ function buildKpis({
       icon: <Share2 aria-hidden />,
       iconClassName: 'text-success',
       value: loading ? '—' : `${network.peersEstablished}/${peersEnabled}`,
-      label: 'Пиры Established',
+      label: 'Пиры установлены',
       footer: (
         <Badge variant="success-light" size="sm">
           {loading ? '…' : `${network.peersTotal} в каталоге`}
@@ -94,13 +94,13 @@ function buildKpis({
       icon: <ServerCog aria-hidden />,
       iconClassName: 'text-warning',
       value: loading ? '—' : `${network.speakersOnline}/${network.speakersTotal}`,
-      label: 'Спикеры online',
+      label: 'Спикеры в сети',
       footer: (
         <Badge
           variant={network.speakersOnline === network.speakersTotal ? 'success-light' : 'warning-light'}
           size="sm"
         >
-          {loading ? '…' : 'live-снимок'}
+          {loading ? '…' : 'онлайн'}
         </Badge>
       ),
     },

apps/web/src/components/dashboard/dashboard-modules-grid.tsx

@@ -11,8 +11,8 @@ import {
 } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
 
-import { CategoryBadge, ModeBadge } from '@/components/category-badge'
-import { DataGridMutedCell, DataGridPrimaryCell } from '@/components/data-grid-cell'
+import { CategoryBadge } from '@/components/category-badge'
+import { DataGridPrimaryCell } from '@/components/data-grid-cell'
 import { DashboardFramePanel } from '@/components/dashboard/dashboard-frame-panel'
 import { Badge } from '@/components/reui/badge'
 import { DataGrid } from '@/components/reui/data-grid/data-grid'
@@ -40,6 +40,7 @@ import {
   InputGroupButton,
   InputGroupInput,
 } from '@evobgp/ui/components/input-group'
+import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
 import { moduleTypeRu } from '@/lib/ui-labels'
 import type { ModuleRow } from '@/types/api'
 import {
@@ -51,20 +52,19 @@ import {
   type SortingState,
 } from '@tanstack/react-table'
 
-type ModuleSort = 'name' | 'type' | 'priority' | 'last_refreshed_at'
+type ModuleSort = 'name' | 'type' | 'priority'
 type EnabledFilter = 'all' | 'enabled' | 'disabled'
 
 const sortLabels: Record<ModuleSort, string> = {
   name: 'Название',
   type: 'Тип',
   priority: 'Приоритет',
-  last_refreshed_at: 'Обновлено',
 }
 
 const EMPTY_MESSAGE = 'Нет модулей по выбранным фильтрам.'
 
 function buildSorting(sortBy: ModuleSort): SortingState {
-  return [{ id: sortBy, desc: sortBy === 'last_refreshed_at' }]
+  return [{ id: sortBy, desc: false }]
 }
 
 export function DashboardModulesGrid({
@@ -119,9 +119,10 @@ export function DashboardModulesGrid({
         cell: ({ row }) => (
           <div className="flex min-w-0 items-center gap-2">
             <BoxesIcon className="text-muted-foreground size-4 shrink-0" aria-hidden />
-            <DataGridPrimaryCell title={row.original.name} accent="primary" className="max-w-[240px]" />
+            <DataGridPrimaryCell title={row.original.name} accent="primary" />
           </div>
         ),
+        minSize: 180,
         meta: { headerTitle: 'Модуль' },
       },
       {
@@ -138,30 +139,9 @@ export function DashboardModulesGrid({
         cell: ({ row }) => (
           <span className="font-mono text-sm tabular-nums">{row.original.priority}</span>
         ),
+        size: 88,
         meta: { headerTitle: 'Приоритет' },
       },
-      {
-        id: 'enabled',
-        accessorFn: (row) => (row.enabled !== false ? 'enabled' : 'disabled'),
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Состояние" />,
-        cell: ({ row }) => <ModeBadge enabled={row.original.enabled !== false} />,
-        meta: { headerTitle: 'Состояние' },
-      },
-      {
-        id: 'last_refreshed_at',
-        accessorFn: (row) => row.last_refreshed_at ?? '',
-        header: ({ column }) => <DataGridColumnHeader column={column} title="Обновлено" />,
-        cell: ({ row }) => (
-          <DataGridMutedCell>
-            {row.original.last_refreshed_at
-              ? new Date(row.original.last_refreshed_at).toLocaleString('ru-RU')
-              : '—'}
-          </DataGridMutedCell>
-        ),
-        sortingFn: (a, b) =>
-          (a.original.last_refreshed_at ?? '').localeCompare(b.original.last_refreshed_at ?? ''),
-        meta: { headerTitle: 'Обновлено' },
-      },
     ],
     [],
   )
@@ -185,6 +165,7 @@ export function DashboardModulesGrid({
     <DashboardFramePanel
       title="Модули"
       description="Поиск, сортировка и быстрый переход к настройке"
+      className="min-w-0"
       actions={
         <Button variant="outline" size="sm" render={<Link to="/modules/new" />}>
           <PlusIcon />
@@ -204,14 +185,14 @@ export function DashboardModulesGrid({
           columnsVisibility: false,
           columnsResizable: false,
           columnsMovable: false,
-          width: 'fixed',
+          width: 'auto',
         }}
         tableClassNames={{ bodyRow: 'group/module-row cursor-pointer [&>td]:h-14' }}
         onRowClick={(row) => void navigate({ to: '/modules/$moduleId', params: { moduleId: row.id } })}
       >
         <div className="flex flex-col">
-          <div className="flex flex-col gap-3 border-b px-4 py-3 lg:flex-row lg:items-center lg:justify-between">
-            <InputGroup className="w-full min-w-40 sm:max-w-xs">
+          <div className="flex flex-col gap-3 border-b px-4 py-3 @3xl:flex-row @3xl:items-center @3xl:justify-between">
+            <InputGroup className="w-full min-w-0 @3xl:max-w-xs">
               <InputGroupAddon align="inline-start">
                 <SearchIcon className="text-muted-foreground size-4" aria-hidden />
               </InputGroupAddon>
@@ -337,8 +318,8 @@ export function DashboardModulesGrid({
           <div className="border-t px-4 py-3">
             {filteredModules.length > 0 ? (
               <DataGridPagination
+                {...DATA_GRID_PAGINATION_RU}
                 sizes={[10, 15, 20]}
-                info="{from}–{to} из {count}"
                 className="py-0"
               />
             ) : (

apps/web/src/components/dashboard/dashboard-network-health.tsx

@@ -57,7 +57,7 @@ export function DashboardNetworkHealth({
       }
       primary={{
         value: loading ? '—' : `${utilization}%`,
-        label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры online',
+        label: mode === 'peers' ? 'Утилизация пиров' : 'Спикеры в сети',
         percent: loading ? 0 : utilization,
         badge: (
           <Badge variant="outline" radius="full" className="h-6 px-2 text-[10px]">
@@ -67,7 +67,7 @@ export function DashboardNetworkHealth({
       }}
       secondary={{
         value: loading ? '—' : offline,
-        label: mode === 'peers' ? 'Не Established' : 'Offline',
+        label: mode === 'peers' ? 'Не установлены' : 'Не в сети',
         percent: total > 0 ? Math.round((offline / total) * 100) : 0,
       }}
       footer={

apps/web/src/components/dashboard/dashboard-quick-links.tsx

@@ -7,7 +7,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'lookup',
     title: 'Проверка IP/домена',
-    description: 'Membership в списках и community (entry + snapshot).',
+    description: 'Проверка IP в списках и BGP-сообществах.',
     to: '/lookup',
     icon: <Search aria-hidden />,
     iconClassName: 'text-primary',
@@ -23,7 +23,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'communities',
     title: 'BGP-сообщества',
-    description: 'Справочник communities для политик экспорта.',
+    description: 'Справочник BGP-сообществ для политик экспорта.',
     to: '/directories',
     icon: <Tags aria-hidden />,
     iconClassName: 'text-info',
@@ -31,7 +31,7 @@ const ACTIONS: QuickActionItem[] = [
   {
     id: 'network',
     title: 'Сеть',
-    description: 'Обзор пиров, спикеров и live-сессий BGP.',
+    description: 'Обзор пиров, спикеров и живых BGP-сессий.',
     to: '/network',
     search: { tab: 'overview' },
     icon: <Network aria-hidden />,

apps/web/src/components/network/network-kpi.tsx

@@ -30,7 +30,7 @@ export function NetworkKpi({
       id: 'peers-established',
       icon: <Share2 aria-hidden />,
       iconClassName: 'text-success',
-      label: 'Пиры Established',
+      label: 'Пиры установлены',
       value: loading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
       footer: (
         <Badge variant="success-light" size="sm">
@@ -44,7 +44,7 @@ export function NetworkKpi({
       id: 'speakers-online',
       icon: <ServerCog aria-hidden />,
       iconClassName: 'text-info',
-      label: 'Спикеры online',
+      label: 'Спикеры в сети',
       value: loading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
       footer: (
         <Badge
@@ -55,7 +55,7 @@ export function NetworkKpi({
           }
           size="sm"
         >
-          {loading ? '…' : 'live'}
+          {loading ? '…' : 'онлайн'}
         </Badge>
       ),
       to: '/network',

apps/web/src/components/network/network-peers-card.tsx

@@ -32,13 +32,13 @@ function peerDeleteLabel(p: PeerRow): string {
 
 const PEER_TABS = [
   { id: 'all', label: 'Все' },
-  { id: 'established', label: 'Established' },
+  { id: 'established', label: 'Установлены' },
   { id: 'pending', label: 'Ожидание' },
   { id: 'disabled', label: 'Выключены' },
 ]
 
 const SESSION_STATE_OPTIONS = [
-  { value: 'Established', label: 'Established' },
+  { value: 'Established', label: 'Установлена' },
   { value: 'Idle', label: 'Idle' },
   { value: 'Active', label: 'Active' },
   { value: 'Connect', label: 'Connect' },

apps/web/src/components/network/peer-form-dialog.tsx

@@ -72,7 +72,7 @@ export function PeerFormDialog({
     }
     const asn = Number(remoteAsn)
     if (!asn || asn <= 0) {
-      toast.error('Remote ASN должен быть больше 0')
+      toast.error('ASN соседа должен быть больше 0')
       return
     }
     const body: BgpPeerCreate = {
@@ -132,7 +132,7 @@ export function PeerFormDialog({
         />
       </div>
       <div className="flex flex-col gap-2">
-        <Label htmlFor="peer-asn">Remote ASN</Label>
+        <Label htmlFor="peer-asn">ASN соседа</Label>
         <Input
           id="peer-asn"
           type="number"

apps/web/src/components/panel-card.tsx

@@ -54,7 +54,7 @@ export function PanelCard({
     <Frame
       dense
       spacing={spacing}
-      className={cn(panelCardClassName, className)}
+      className={cn(panelCardClassName, 'min-w-0', className)}
     >
       <FramePanel className="flex flex-col gap-0 p-0 shadow-xs">
         {hasHeader ? (

apps/web/src/components/reui-kit/kpi-cols.ts

@@ -1,10 +1,13 @@
-/** Shared grid column classes for hybrid KPI / Quick Actions tiles. */
+/**
+ * Shared grid column classes for hybrid KPI / Quick Actions tiles.
+ * Container queries only — never 5–6 columns on laptop width (tiles overlap).
+ * @see https://reui.io/preview/base/stats-12
+ */
 export function kpiCols(count: number): string {
   if (count <= 1) return 'grid-cols-1'
   if (count === 2) return 'grid-cols-1 @xl:grid-cols-2'
   if (count === 3) return 'grid-cols-1 @3xl:grid-cols-3'
   if (count === 4) return 'grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4'
-  if (count === 5) return 'grid-cols-2 @3xl:grid-cols-3 xl:grid-cols-5'
-  if (count === 6) return 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-6'
-  return 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-4'
+  if (count <= 6) return 'grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3'
+  return 'grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4'
 }

apps/web/src/components/reui-kit/ops-dashboard.tsx

@@ -27,7 +27,7 @@ interface OpsDashboardProps {
 }
 
 const rootClassName =
-  'text-foreground @container flex w-full flex-col gap-2 md:gap-3'
+  'text-foreground @container flex w-full min-w-0 flex-col gap-4 md:gap-6'
 
 function OpsDashboardSkeleton() {
   return (
@@ -37,7 +37,7 @@ function OpsDashboardSkeleton() {
         <Skeleton className="mt-2 h-4 w-80 max-w-full" />
       </header>
       <KpiStatGrid cards={[]} isLoading skeletonCount={4} />
-      <div className="grid gap-2 @3xl:grid-cols-2">
+      <div className="flex min-w-0 flex-col gap-4">
         <Skeleton className="h-64 w-full rounded-xl" />
         <Skeleton className="h-64 w-full rounded-xl" />
       </div>
@@ -79,13 +79,13 @@ export function OpsDashboard({
 
       <section
         aria-label="Аналитика"
-        className="grid min-w-0 items-start gap-2 @3xl:grid-cols-2"
+        className="flex min-w-0 flex-col gap-4"
       >
         {charts}
       </section>
 
       <section aria-label={queueTitle}>
-        <Frame dense spacing="sm" className="w-full">
+        <Frame dense spacing="sm" className="w-full min-w-0">
           <FrameHeader>
             <FrameTitle>{queueTitle}</FrameTitle>
             <FrameDescription>{queueDescription}</FrameDescription>

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

@@ -39,6 +39,8 @@ import {
   AlertTitle,
 } from '@/components/reui/alert'
 import { EmptyState } from '@/components/empty-state'
+import { DATA_GRID_PAGINATION_RU } from '@/lib/data-grid-defaults'
+import { FILTERS_I18N_RU } from '@/lib/filters-i18n'
 import { applyFiltersToData } from './filter-utils'
 
 export interface ResourcePageTab {
@@ -322,6 +324,7 @@ export function ResourcePage<T extends object>({
                 fields={filterFields}
                 onChange={handleFiltersChange}
                 size="default"
+                i18n={FILTERS_I18N_RU}
                 trigger={
                   <Button type="button" variant="outline" aria-label="Фильтры">
                     <FilterIcon className="size-4" aria-hidden="true" />
@@ -355,11 +358,8 @@ export function ResourcePage<T extends object>({
 
             <FrameFooter>
               <DataGridPagination
+                {...DATA_GRID_PAGINATION_RU}
                 sizes={[5, 10, 20, 50]}
-                rowsPerPageLabel="Строк на странице"
-                info="{from} - {to} of {count}"
-                previousPageLabel="Предыдущая"
-                nextPageLabel="Следующая"
               />
             </FrameFooter>
           </FramePanel>

apps/web/src/components/reui-kit/settings-shell.tsx

@@ -43,16 +43,21 @@ interface SettingsShellProps {
  */
 export function SettingsShell({
   title = 'Настройки',
-  description = 'Подключение UI и параметры плоскости управления',
+  description,
   tabs = DEFAULT_TABS,
 }: SettingsShellProps) {
   const isMobile = useIsMobile()
   const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const headerDescription =
+    description ??
+    (pathname.startsWith('/tenant-settings')
+      ? 'Глобальные параметры BIRD и плоскости управления'
+      : 'Подключение UI и параметры плоскости управления')
 
   return (
     <PageShell>
       <div className="mx-auto flex w-full max-w-4xl flex-col gap-5">
-        <PageHeader title={title} description={description} />
+        <PageHeader title={title} description={headerDescription} />
 
         <div
           className={cn(

apps/web/src/components/schedule/schedule-agenda-panel.tsx

@@ -133,7 +133,9 @@ export function ScheduleAgendaPanel({
             </div>
             <Select value={filter} onValueChange={(v) => v && setFilter(v as JobFilter)}>
               <SelectTrigger size="sm" className="w-full sm:w-44">
-                <SelectValue />
+                <SelectValue>
+                  {FILTER_ITEMS.find((item) => item.value === filter)?.label}
+                </SelectValue>
               </SelectTrigger>
               <SelectContent>
                 {FILTER_ITEMS.map((item) => (

apps/web/src/components/skeletons.tsx

@@ -39,11 +39,11 @@ export function AnalyticsDashboardSkeleton() {
       </div>
 
       <div className={dashboardMainSidebarClassName}>
-        <Skeleton className="h-96 w-full rounded-xl xl:col-span-8" />
-        <Skeleton className="h-96 w-full rounded-xl xl:col-span-4" />
+        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
+        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
       </div>
 
-      <div className="grid gap-4 lg:grid-cols-2">
+      <div className={chartPanelGridClassName}>
         <Skeleton className="h-64 w-full rounded-xl" />
         <Skeleton className="h-64 w-full rounded-xl" />
       </div>

apps/web/src/lib/data-grid-defaults.ts

@@ -44,6 +44,7 @@ export const DATA_GRID_MESSAGES_RU = {
 export const DATA_GRID_DENSE_LAYOUT: NonNullable<DataGridProps<object>['tableLayout']> = {
   ...DATA_GRID_TABLE_LAYOUT,
   dense: true,
+  width: 'auto',
 }
 
 export function createTextGlobalFilter<TData extends object>(

apps/web/src/lib/filters-i18n.ts

@@ -0,0 +1,94 @@
+import {
+  DEFAULT_I18N,
+  type FilterI18nConfig,
+} from '@/components/reui/filters'
+
+const OPERATOR_LABEL_RU: Record<string, string> = {
+  is: 'равно',
+  is_not: 'не равно',
+  is_any_of: 'любое из',
+  is_not_any_of: 'кроме',
+  includes_all: 'включает все',
+  excludes_all: 'исключает все',
+  before: 'до',
+  after: 'после',
+  between: 'между',
+  not_between: 'вне диапазона',
+  contains: 'содержит',
+  not_contains: 'не содержит',
+  starts_with: 'начинается с',
+  ends_with: 'заканчивается на',
+  equals: 'равно',
+  not_equals: 'не равно',
+  greater_than: 'больше',
+  less_than: 'меньше',
+  overlaps: 'пересекается',
+  includes: 'включает',
+  excludes: 'исключает',
+  empty: 'пусто',
+  not_empty: 'не пусто',
+}
+
+export const FILTERS_I18N_RU: FilterI18nConfig = {
+  ...DEFAULT_I18N,
+  addFilter: 'Фильтр',
+  searchFields: 'Фильтр…',
+  noFieldsFound: 'Поля не найдены.',
+  noResultsFound: 'Ничего не найдено.',
+  select: 'Выбрать…',
+  true: 'Да',
+  false: 'Нет',
+  min: 'Мин.',
+  max: 'Макс.',
+  to: '—',
+  typeAndPressEnter: 'Введите и нажмите Enter',
+  selected: 'выбрано',
+  selectedCount: 'выбрано',
+  addFilterTitle: 'Добавить фильтр',
+  operators: {
+    ...DEFAULT_I18N.operators,
+    is: 'равно',
+    isNot: 'не равно',
+    isAnyOf: 'любое из',
+    isNotAnyOf: 'кроме',
+    includesAll: 'включает все',
+    excludesAll: 'исключает все',
+    before: 'до',
+    after: 'после',
+    between: 'между',
+    notBetween: 'вне диапазона',
+    contains: 'содержит',
+    notContains: 'не содержит',
+    startsWith: 'начинается с',
+    endsWith: 'заканчивается на',
+    isExactly: 'точно',
+    equals: 'равно',
+    notEquals: 'не равно',
+    greaterThan: 'больше',
+    lessThan: 'меньше',
+    overlaps: 'пересекается',
+    includes: 'включает',
+    excludes: 'исключает',
+    includesAllOf: 'включает все',
+    includesAnyOf: 'включает любое',
+    empty: 'пусто',
+    notEmpty: 'не пусто',
+  },
+  placeholders: {
+    enterField: (fieldType: string) => `Введите ${fieldType}…`,
+    selectField: 'Выбрать…',
+    searchField: (fieldName: string) => `Поиск ${fieldName.toLowerCase()}…`,
+    enterKey: 'Введите ключ…',
+    enterValue: 'Введите значение…',
+  },
+  helpers: {
+    formatOperator: (operator: string) =>
+      OPERATOR_LABEL_RU[operator] ?? operator.replace(/_/g, ' '),
+  },
+  validation: {
+    invalidEmail: 'Некорректный email',
+    invalidUrl: 'Некорректный URL',
+    invalidTel: 'Некорректный телефон',
+    invalid: 'Некорректное значение',
+  },
+}

apps/web/src/lib/ui-surface.ts

@@ -30,7 +30,13 @@ export const kpiGridClassName =
 export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'
 
 /** Two-column chart panel row (monitoring / network overview). */
-export const chartPanelGridClassName = 'grid grid-cols-1 gap-4 @5xl:grid-cols-2'
+export const chartPanelGridClassName =
+  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'
 
-/** Main + sidebar layout (8+4) used on dashboard. */
-export const dashboardMainSidebarClassName = 'grid gap-4 xl:grid-cols-12 xl:items-start'
+/**
+ * Main + sidebar: stack until the dashboard container is wide enough.
+ * Do not nest this inside another 2-col grid — that squeezes modules/timeline.
+ * @see https://reui.io/preview/base/dashboard-1
+ */
+export const dashboardMainSidebarClassName =
+  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'

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

@@ -64,7 +64,7 @@ function AccessComponent() {
         variant: revokedCount > 0 ? 'warning' : 'default',
         footer: (
           <Badge variant={revokedCount > 0 ? 'warning-light' : 'outline'} size="sm">
-            revoked
+            отозваны
           </Badge>
         ),
       },

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

@@ -37,7 +37,9 @@ function parseShowQuickActions(value: unknown): boolean {
 }
 
 /**
- * Dashboard — OpsDashboard kit (KPI → QuickActions → charts → queue).
+ * Dashboard — OpsDashboard kit (KPI → QuickActions → modules → activity/health → queue).
+ * Charts slot is a vertical stack: modules stay full-width; activity shares a row
+ * with BGP widgets only at @5xl (container), never nested 8+4 inside a 2-col parent.
  * @see https://reui.io/preview/base/dashboard-1
  * @see https://reui.io/preview/base/stats-12
  */
@@ -99,33 +101,31 @@ function DashboardComponent() {
       afterKpi={showQuickActions ? <DashboardQuickLinks /> : null}
       charts={
         <>
-          <div className={dashboardMainSidebarClassName}>
-            <div className="xl:col-span-8">
-              <DashboardModulesGrid modules={modules} isLoading={refreshing} />
-            </div>
-            <div className="xl:col-span-4">
-              <DashboardActivityTimeline
-                jobs={jobs}
-                revisions={revisions}
-                peers={peers}
-                speakers={speakers}
-              />
-            </div>
+          <div className="min-w-0">
+            <DashboardModulesGrid modules={modules} isLoading={refreshing} />
           </div>
-          <div className={chartPanelGridClassName}>
-            <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
-            <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
+          <div className={dashboardMainSidebarClassName}>
+            <DashboardActivityTimeline
+              jobs={jobs}
+              revisions={revisions}
+              peers={peers}
+              speakers={speakers}
+            />
+            <div className="grid min-w-0 gap-4">
+              <DashboardNetworkHealth peers={peers} speakers={speakers} jobs={jobs} />
+              <DashboardOperationsBreakdown jobs={jobs} modules={modules} />
+            </div>
           </div>
         </>
       }
-      queueTitle="Недавняя активность"
-      queueDescription="Задачи и ревизии плоскости управления"
+      queueTitle="Задачи и ревизии"
+      queueDescription="Последние фоновые операции и история конфигураций"
       queue={
-        <div className="grid gap-4 lg:grid-cols-2">
+        <div className={chartPanelGridClassName}>
           <DashboardFramePanel
             title="Недавние задачи"
             description="Последние фоновые операции"
-            className="h-full"
+            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />
@@ -136,7 +136,7 @@ function DashboardComponent() {
           <DashboardFramePanel
             title="Последние ревизии"
             description="История конфигураций"
-            className="h-full"
+            className="h-full min-w-0"
           >
             {activityLoading ? (
               <Skeleton className="m-4 h-24 w-auto" />