fix(ui): проверить доступность и адаптивность сертификатов

app/(main)/certificates/page.tsx

@@ -4,7 +4,7 @@ import { Suspense, useMemo, useState } from "react"
 import { useSearchParams } from "next/navigation"
 import { readCertificatesUrl, patchCertificatesUrl, type CertificateStatusFilter } from "@/lib/certificates-url-state"
 import { PageHeader } from "@/components/page-header"
-import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
+import { FormField, FormToggle, SectionTitle, SegmentedControl } from "@/components/form-kit"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
 import type { Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
@@ -77,10 +77,10 @@ function mockToDto(cert: (typeof routerCertificates)[number]): CertificateDto {
 
 function CertPartAlertExpired({ expired }: { expired: CertificateView[] }) {
   return (
-    <div className="flex items-start gap-3 rounded-lg bg-red-500/5 border border-red-500/20 px-4 py-3 text-sm">
-      <AlertCircleIcon className="size-5 text-red-500 shrink-0 mt-0.5" />
+    <div className="flex items-start gap-3 rounded-lg bg-destructive/5 border border-destructive/20 px-4 py-3 text-sm">
+      <AlertCircleIcon className="size-5 text-destructive shrink-0 mt-0.5" />
       <div>
-        <p className="font-medium text-red-600 dark:text-red-400">
+        <p className="font-medium text-destructive">
           {expired.length} {expired.length === 1 ? "истёкший сертификат" : "истёкших сертификата"}
         </p>
         <p className="text-muted-foreground text-xs mt-0.5">
@@ -93,10 +93,10 @@ function CertPartAlertExpired({ expired }: { expired: CertificateView[] }) {
 
 function CertPartAlertExpiring({ expiring }: { expiring: CertificateView[] }) {
   return (
-    <div className="flex items-start gap-3 rounded-lg bg-amber-500/5 border border-amber-500/20 px-4 py-3 text-sm">
-      <AlertTriangleIcon className="size-5 text-amber-500 shrink-0 mt-0.5" />
+    <div className="flex items-start gap-3 rounded-lg bg-warning/5 border border-warning/20 px-4 py-3 text-sm">
+      <AlertTriangleIcon className="size-5 text-warning shrink-0 mt-0.5" />
       <div>
-        <p className="font-medium text-amber-600 dark:text-amber-400">
+        <p className="font-medium text-warning">
           {expiring.length} {expiring.length === 1 ? "сертификат истекает" : "сертификата истекают"} в течение 30 дней
         </p>
         <p className="text-muted-foreground text-xs mt-0.5">
@@ -112,11 +112,13 @@ function CertPartKpi({
   expiring,
   expired,
   complete,
+  totalKnown,
 }: {
   displayCerts: CertificateView[]
   expiring: CertificateView[]
   expired: CertificateView[]
   complete: boolean
+  totalKnown: boolean
 }) {
   return (
     <KpiStatGrid
@@ -125,7 +127,7 @@ function CertPartKpi({
         {
           id: "all",
           label: "Всего",
-          value: complete ? displayCerts.length : "—",
+          value: totalKnown ? displayCerts.length : "—",
           icon: <ShieldCheckIcon className="size-4" />,
           iconClassName: "text-muted-foreground",
         },
@@ -508,27 +510,27 @@ function CertificatesContent() {
         />
       }
     >
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 min-w-0">
           {!isLive && <p role="status" className="text-xs text-muted-foreground">Моковые данные</p>}
           {urlError && <div role="alert" aria-label="Контекст сертификатов">{urlError} <Button variant="outline" size="sm" onClick={() => writeContext({ server: null, status: null, q: null }, true)}>Сбросить контекст</Button></div>}
           {!urlError && selectedServerId !== ALL_SERVERS_ID && (isLive ? catalog.hasState && !snapshots[selectedServerId] : !mockServers.some(server => server.id === selectedServerId)) && <p role="alert">Выбранный сервер недоступен в каталоге сертификатов. Выберите другой сервер.</p>}
           {isLive && backendStatus === false && (
-            <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
+            <div className="rounded-lg border border-warning/30 bg-warning/5 px-4 py-3 text-sm text-warning">
               Backend недоступен — live-операции отключены.
             </div>
           )}
           {loadError && isLive && (
-            <div role="alert" aria-label="Каталог сертификатов" className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
+            <div role="alert" aria-label="Каталог сертификатов" className="[overflow-wrap:anywhere] rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive">
               {catalog.hasState ? "Последние данные сохранены. " : "Сертификаты пока неизвестны. "}{loadError}
             </div>
           )}
 
-          {isLive && serverError && <p role="alert" aria-label="Серверы сертификатов">{catalog.hasServers ? "Последние серверы сохранены. " : "Каталог серверов пока неизвестен. "}{serverError}</p>}
+          {isLive && serverError && <p role="alert" aria-label="Серверы сертификатов" className="[overflow-wrap:anywhere]">{catalog.hasServers ? "Последние серверы сохранены. " : "Каталог серверов пока неизвестен. "}{serverError}</p>}
           {isLive && !canRead && <p role="status">Нет права mm:certificates:read.</p>}
           {isLive && !canReadServers && <p role="status">Нет права mm:servers:read. Выбор устройства для выпуска недоступен.</p>}
           {isLive && catalog.collectedAt && <p className="text-xs text-muted-foreground">Последнее чтение каталога: {new Date(catalog.collectedAt).toLocaleString("ru-RU")}</p>}
           {isLive && Object.values(snapshots).filter(snapshot => selectedServerId === ALL_SERVERS_ID || snapshot.latest.serverId === selectedServerId).map(snapshot => <div key={snapshot.latest.serverId}>
-            {snapshot.latest.error && <p role="alert" aria-label={"Сертификаты сервера " + snapshot.latest.serverId}>{snapshot.latest.serverName}: {snapshot.latest.error}. {snapshot.confirmed ? "Последние сертификаты сохранены." : "Сертификаты пока неизвестны."}</p>}
+            {snapshot.latest.error && <p role="alert" aria-label={"Сертификаты сервера " + snapshot.latest.serverId} className="[overflow-wrap:anywhere]">{snapshot.latest.serverName}: {snapshot.latest.error}. {snapshot.confirmed ? "Последние сертификаты сохранены." : "Сертификаты пока неизвестны."}</p>}
             <p className="text-xs text-muted-foreground">{snapshot.latest.serverName}: {snapshot.confirmed ? "Подтверждённые данные от " + new Date(snapshot.confirmed.collectedAt).toLocaleString("ru-RU") : "Успешного чтения нет"}</p>
           </div>)}
 
@@ -540,7 +542,7 @@ function CertificatesContent() {
           )}
 
           {!classificationsKnown && <p role="status" className="text-xs text-muted-foreground">Сводка неполная: часть устройств, статусов или сроков неизвестна. Таблица показывает доступные снимки.</p>}
-          <CertPartKpi displayCerts={scopedCerts} expiring={expiring} expired={expired} complete={classificationsKnown} />
+          <CertPartKpi displayCerts={scopedCerts} expiring={expiring} expired={expired} complete={classificationsKnown} totalKnown={scopeKnown} />
 
           <CertificateRenewSettingsPanel backendUrl={backendUrl} liveReady={liveReady} canRead={canRead} canWrite={canWrite} />
 
@@ -551,17 +553,17 @@ function CertificatesContent() {
               search={search}
               onSearchChange={setSearch}
               searchPlaceholder="Поиск по имени, CN, эмитенту…"
-              segmented={{
-                value: statusFilter,
-                onChange: setStatusFilter,
-                options: [
+              filterControl={<div role="group" aria-label="Статус сертификатов" className="w-full sm:w-auto max-w-full overflow-x-auto"><SegmentedControl className="whitespace-nowrap"
+                value={statusFilter}
+                onChange={setStatusFilter}
+                options={[
                   { value: "all", label: "Все" },
                   { value: "valid", label: "Действующие" },
                   { value: "expired", label: "Истёкшие" },
                   { value: "revoked", label: "Отозванные" },
                   { value: "unknown", label: "Неизвестные" },
-                ],
-              }}
+                ]}
+              /></div>}
               countLabel={isLive && !catalog.hasState ? "Количество неизвестно" : `${filtered.length} строк в снимках`}
             />
             {urlError ? <p role="status" className="p-5">Исправьте контекст ссылки</p> : isLive && scopedCerts.length === 0 && !scopeKnown ? <p role="status" className="p-5">{loading ? "Загрузка сертификатов…" : "Список сертификатов пока неизвестен"}</p> : <CertificatesDataGrid
@@ -578,7 +580,7 @@ function CertificatesContent() {
     </ServerRailLayout>
 
       <Sheet open={issueOpen} onOpenChange={(v) => { setIssueOpen(v); if (!v) setIssueStep(1) }}>
-        <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+        <SheetContent side="right" className="data-[side=right]:w-full data-[side=right]:sm:max-w-lg min-w-0 flex flex-col gap-0 p-0">
           <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
             <SheetTitle>Выпуск сертификата</SheetTitle>
             <SheetDescription>
@@ -586,7 +588,7 @@ function CertificatesContent() {
             </SheetDescription>
           </SheetHeader>
 
-          <div className="px-6 pt-3 text-sm">
+          <div className="px-6 pt-3 text-sm min-w-0 [overflow-wrap:anywhere]">
             {(issue.error || issue.storageError) && <p role="alert" aria-label="Выпуск сертификата">{issue.error || issue.storageError}</p>}
             {issue.checkpoint && <p className="text-xs text-muted-foreground">Закрытие формы не отменяет серверную задачу. Её можно проверить повторно.</p>}
             {issue.checkpoint && <p role="status">Задача {issue.checkpoint.request.requestId}: {issue.checkpoint.job ? ({ queued: "В очереди", running: "Выполняется", done: "Завершена", failed: "Ошибка" }[issue.checkpoint.job.status]) + " · " + issue.checkpoint.job.step : issue.checkpoint.accepted ? "Принята; результат пока неизвестен" : "Принятие запроса пока не подтверждено"}. Сервер {issue.checkpoint.request.serverId}, сертификат {issue.checkpoint.request.certName}.</p>}