From 2548f24aff5df52e66f560111d2338a99d6c57ea Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 25 May 2026 15:36:32 +0300
Subject: [PATCH] =?UTF-8?q?fix(admin-ui):=20audit=20=E2=80=94=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=BC=D0=BF=D0=B0=D0=BA=D1=82=D0=BD=D0=B5=D0=B5=20=D0=BF?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B5=D0=BB=D1=8C=20=D1=84=D0=B8=D0=BB=D1=8C=D1=82?=
 =?UTF-8?q?=D1=80=D0=BE=D0=B2=20+=20popover=20=D0=BA=D0=B0=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B4=D0=B0=D1=80=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. DateRangePicker popover. PopoverContent имел default w-72 (288px),
   а DayPicker с numberOfMonths={2} требует ~560px. Из-за этого второй
   месяц переносился под первый, popover вылазил поверх таблицы аудита
   и кнопок «Сбросить/Применить». Override на p-3 w-auto max-w-[min(95vw,640px)]
   — два месяца теперь side-by-side, popover floats как должно.

2. Панель фильтров /audit. Было: 3-col grid с 4 input'ами + DateRange
   span'ит 2 cols на отдельной строке. Стало: на xl (≥1280px) все 5
   полей inline в одну строку (lg → 3 cols, sm → 2, mobile → 1).
   Padding p-4 space-y-3 → p-3 space-y-2. Убран border-t на action row
   — визуальный шум.

Изменения только на /audit (date-range-picker — shared компонент,
но используется только в audit-фильтрах сейчас; рендер других мест
не страдает — popover просто шире, w-auto не ломает узкий контент).
---
 ordinis-admin-ui/src/routes/audit.tsx         | 52 +++++++++----------
 .../src/ui/components/date-range-picker.tsx   |  6 ++-
 2 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/ordinis-admin-ui/src/routes/audit.tsx b/ordinis-admin-ui/src/routes/audit.tsx
index efee47f..3ade8a2 100644
--- a/ordinis-admin-ui/src/routes/audit.tsx
+++ b/ordinis-admin-ui/src/routes/audit.tsx
@@ -373,8 +373,11 @@ function FilterPanel({
   }
 
   return (
-    <div className="bg-surface border border-line rounded-lg p-4 space-y-3">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+    <div className="bg-surface border border-line rounded-lg p-3 space-y-2">
+      {/* На xl+ (≥1280px) все 5 фильтров inline в одну строку; lg → 3 cols,
+          sm → 2 cols, mobile → 1. Раньше DateRangePicker занимал md:col-span-2
+          → шла на отдельную строку даже на широких экранах. */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-2">
         <SingleSelect
           label={t('audit.filter.dictionary')}
           options={dictionaryOptions}
@@ -399,31 +402,28 @@ function FilterPanel({
           onChange={(e) => set('businessKey', e.target.value || undefined)}
           onKeyDown={handleEnter}
         />
-        {/* DateRangePicker заменяет пару отдельных DatePicker'ов — один
-          * popover с двумя месяцами, выбор start/end в одном UI. ISO sтроки
-          * c local TZ offset формируются здесь, чтобы backend получал
-          * правильный bounds (T00:00:00 для from, T23:59:59 для to). */}
-        <div className="md:col-span-2">
-          <DateRangePicker
-            label={t('audit.filter.range', { defaultValue: 'Период' })}
-            value={{ from: fromDate ?? undefined, to: toDate ?? undefined }}
-            onChange={({ from, to }) => {
-              const fromIso = from
-                ? `${from.getFullYear()}-${String(from.getMonth() + 1).padStart(2, '0')}-${String(
-                    from.getDate(),
-                  ).padStart(2, '0')}T00:00:00${localTzOffset(from)}`
-                : undefined
-              const toIso = to
-                ? `${to.getFullYear()}-${String(to.getMonth() + 1).padStart(2, '0')}-${String(
-                    to.getDate(),
-                  ).padStart(2, '0')}T23:59:59${localTzOffset(to)}`
-                : undefined
-              onChange({ ...filters, from: fromIso, to: toIso })
-            }}
-          />
-        </div>
+        {/* DateRangePicker — один popover с двумя месяцами, выбор start/end
+            в одном UI. ISO строки с local TZ offset формируются здесь чтобы
+            backend получал правильный bounds (T00:00:00 для from, T23:59:59 для to). */}
+        <DateRangePicker
+          label={t('audit.filter.range', { defaultValue: 'Период' })}
+          value={{ from: fromDate ?? undefined, to: toDate ?? undefined }}
+          onChange={({ from, to }) => {
+            const fromIso = from
+              ? `${from.getFullYear()}-${String(from.getMonth() + 1).padStart(2, '0')}-${String(
+                  from.getDate(),
+                ).padStart(2, '0')}T00:00:00${localTzOffset(from)}`
+              : undefined
+            const toIso = to
+              ? `${to.getFullYear()}-${String(to.getMonth() + 1).padStart(2, '0')}-${String(
+                  to.getDate(),
+                ).padStart(2, '0')}T23:59:59${localTzOffset(to)}`
+              : undefined
+            onChange({ ...filters, from: fromIso, to: toIso })
+          }}
+        />
       </div>
-      <div className="flex justify-end gap-2 pt-2 border-t border-line">
+      <div className="flex justify-end gap-2">
         <Button type="button" variant="secondary" onClick={onReset}>
           {t('audit.filter.reset')}
         </Button>
diff --git a/ordinis-admin-ui/src/ui/components/date-range-picker.tsx b/ordinis-admin-ui/src/ui/components/date-range-picker.tsx
index 44014c2..b3d6ebd 100644
--- a/ordinis-admin-ui/src/ui/components/date-range-picker.tsx
+++ b/ordinis-admin-ui/src/ui/components/date-range-picker.tsx
@@ -161,7 +161,11 @@ export function DateRangePicker({
             )}
           </button>
         </PopoverTrigger>
-        <PopoverContent align="start" className="p-3">
+        {/* PopoverContent default w-72 (288px) — DayPicker mode=range
+            numberOfMonths={2} требует ~560px, иначе второй месяц переносится
+            под первый и popover вылазит поверх контента ниже. На <620px
+            (mobile/narrow) — один месяц чтобы помещалось в w-72-aware viewport. */}
+        <PopoverContent align="start" className="p-3 w-auto max-w-[min(95vw,640px)]">
           <PopoverPrimitive.Close className="hidden" />
           <React.Suspense
             fallback={