fix(admin-ui): QA report sweep — modal/table layout, i18n, sidebar polish
Восемь дефектов из QA-отчёта одним MR. #1 — Records-table теряла первую колонку после закрытия Create-modal. Корень: lg:grid-cols-[220px_1fr] без minmax(0,…) — 1fr имел implicit min-content (=max-content), позволяя table вырасти шире viewport. После закрытия Radix Dialog снималось body padding-right (~15px), grid пересчитывался и клиппил колонку под overflow-hidden card. Fix: grid-cols-[220px_minmax(0,1fr)] + убран overflow-hidden с card (Table primitive имеет свой overflow-x-auto). #2 — Esc закрывал modal с задержкой (визуал/DOM рассинхрон). duration-200 на slow CPU ощущался как несколько кадров между state=closed и unmount. Снижено до duration-150 — совпадает с tw-animate-css дефолтами. #3 — «+ Создать» обрезалось до «+ Соз» на ~1075px на detail-странице. EditorTabBar: 6 tabs + 3 кнопки actions в одном flex row без shrink-0 давили друг друга. Решение: tabs в overflow-x-auto wrapper с min-w-0, actions в shrink-0 контейнере — tabs скроллятся, actions всегда видны полностью. scrollbar скрыт визуально (height-консистентность). #4 — Обрезка названий в records-table при PUBLIC+INTERNAL. Добавлен div.overflow-x-auto вокруг table + min-w-[760px] на table + min-w-[180px] max-w-[320px] truncate на name cell. Catalog table также получает min-w-[220px] на name column. #5 — Заголовки колонок и кнопка «Граф» не локализованы на EN. defaultValue:'Название' inline в коде падал на ru-text при EN locale. Вынесены в i18n: dict.col.title/id/bundle/records/updated/outgoingFk/ incomingFk + dict.list.graph для обеих локалей. #6 — Modal backdrop почти невидим. bg-black/40 + 1px blur → bg-black/55 + 2px blur. Заметно темнее при сохранении читабельности фона, фокус на modal. #7 — Неестественная подсказка в форме «Создать»: «Имя оставьте уникальное; версия сбросится на 1.0.0» → «Укажите уникальное имя — версия сбросится на 1.0.0». #8 — «Главная» в сайдбаре сбивала active state. Клик на «Главную» вёл на `/` → redirect на /dictionaries → подсветка уезжала на «Справочники». Logo сверху уже даёт home affordance, поэтому duplicate nav item удалён (desktop + mobile).
This commit is contained in:
@@ -39,7 +39,12 @@ export const DialogOverlay = React.forwardRef<
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed inset-0 z-50 bg-black/40 backdrop-blur-[1px]',
|
||||
// QA bug #6: bg-black/40 + 1px blur был "почти невидимым" — backdrop
|
||||
// не фокусировал внимание на modal'е. Bumped до /55 (заметно темнее
|
||||
// при сохранении читабельности фона) + 2px blur. Visual reference:
|
||||
// Radix docs/shadcn используют bg-black/80 по умолчанию, /55 —
|
||||
// компромисс между нашим тёплым палитром и стандартом.
|
||||
'fixed inset-0 z-50 bg-black/55 backdrop-blur-[2px]',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
className,
|
||||
@@ -69,13 +74,18 @@ export const DialogContent = React.forwardRef<
|
||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||
DialogContentProps
|
||||
>(function DialogContent({ className, children, size = 'md', hideClose, ...props }, ref) {
|
||||
// duration-150 (вместо 200) — анимация закрытия укладывается в один frame
|
||||
// на 60Hz без видимого "застывания" между state=closed и unmount. QA bug #2:
|
||||
// "модал становится полупрозрачным, но остаётся отрисованным в течение
|
||||
// секунд" — на slow CPU 200ms ощущается как несколько кадров; cutoff 150ms
|
||||
// совпадает с tw-animate-css дефолтами и убирает рассинхрон визуала/DOM.
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed z-50 grid gap-4 border border-line bg-surface p-6 shadow-2xl duration-200',
|
||||
'fixed z-50 grid gap-4 border border-line bg-surface p-6 shadow-2xl duration-150',
|
||||
// Centered modal — left/top 50% + translate. В <880px mode пользуем
|
||||
// max-width 95vw чтобы modal не упирался в edges (вместо fullscreen
|
||||
// inset-0 который конфликтовал с left-1/2 → modal off-screen).
|
||||
|
||||
Reference in New Issue
Block a user