feat: Рефакторинг компонента HistoryModal с заменой на простой подход с встроенным backdrop. Упрощение структуры и улучшение взаимодействия с пользователем через обновленный интерфейс модального окна.

frontend/src/components/HistoryModal.jsx

@@ -1,4 +1,3 @@
-import Modal from './Modal';
 import { useState } from 'react';
 import api from '../lib/api.js';
 import { useQuery } from '@tanstack/react-query';
@@ -9,7 +8,7 @@ import { formatDateTimeWithRelative } from '../lib/datetime.js';
 
 /**
  * HistoryModal - модальное окно истории версий
- * Рефакторинг: теперь использует базовый Modal компонент
+ * Простой подход со встроенным backdrop
  */
 export default function HistoryModal({ resource, show, onClose, onRolledBack }) {
   const [loading, setLoading] = useState(false);
@@ -50,28 +49,51 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
     });
   };
 
-  const handleOpen = () => {
-    if (show) {
+  if (!show) return null;
+
+  if (show && items.length === 0) {
     refetch().catch(() => notify.error('Не удалось загрузить историю версий'));
   }
-  };
 
   return (
     <>
-      <Modal
-        show={show}
-        onClose={onClose}
-        title={
-          <div className="d-flex align-items-center">
+      <div 
+        className="modal show d-block" 
+        role="dialog" 
+        aria-modal="true"
+        style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+        onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
+      >
+        <div className="modal-dialog modal-lg modal-dialog-centered" role="document">
+          <div 
+            className="modal-content"
+            tabIndex={-1}
+            onKeyDown={(e) => {
+              if (e.key === 'Tab') {
+                const c = e.currentTarget;
+                const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+                if (!focusable || focusable.length === 0) return;
+                const first = focusable[0];
+                const last = focusable[focusable.length - 1];
+                if (e.shiftKey && document.activeElement === first) {
+                  e.preventDefault();
+                  last.focus();
+                } else if (!e.shiftKey && document.activeElement === last) {
+                  e.preventDefault();
+                  first.focus();
+                }
+              }
+            }}
+          >
+            <div className="modal-header">
+              <h5 className="modal-title d-flex align-items-center">
                 <IconHistory className="me-2" size={24} />
                 История версий
+              </h5>
+              <button type="button" className="btn-close" onClick={onClose} />
             </div>
-        }
-        size="lg"
-        centered
-        scrollable
-        onOpen={handleOpen}
-      >
+            
+            <div className="modal-body">
               {/* Info bar */}
               <div className="d-flex justify-content-between align-items-center mb-3 p-2 bg-blue-lt rounded">
                 <div className="text-muted small d-flex align-items-center">
@@ -148,7 +170,14 @@ export default function HistoryModal({ resource, show, onClose, onRolledBack })
                   </tbody>
                 </table>
               </div>
-      </Modal>
+            </div>
+            
+            <div className="modal-footer">
+              <button className="btn" onClick={onClose}>Закрыть</button>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <ConfirmDialog
         open={confirmState.open}

frontend/src/components/Modal.jsx

@@ -1,21 +1,8 @@
 import { useEffect, useRef } from 'react';
 
 /**
- * Универсальный Modal компонент с гарантированным backdrop
- * Единая система для всех модальных окон проекта
- * 
- * @param {boolean} show - Показать/скрыть модалку
- * @param {function} onClose - Callback при закрытии
- * @param {function} onOpen - Callback при открытии
- * @param {string|ReactNode} title - Заголовок модалки
- * @param {ReactNode} children - Содержимое
- * @param {ReactNode} footer - Футер с кнопками
- * @param {string} size - Размер: sm, md, lg, xl
- * @param {boolean} backdrop - Показывать backdrop (по умолчанию true)
- * @param {boolean} keyboard - Закрывать по ESC (по умолчанию true)
- * @param {boolean} scrollable - Прокручиваемое тело
- * @param {boolean} centered - Центрировать по вертикали
- * @param {string} className - Дополнительные CSS классы
+ * Универсальный Modal компонент
+ * Простой и надёжный - работает как HistoryModal
  */
 function Modal({ 
   show, 
@@ -32,13 +19,12 @@ function Modal({
   className = ''
 }) {
   const modalRef = useRef(null);
-  const backdropRef = useRef(null);
 
   // Управление классом modal-open на body
   useEffect(() => {
     if (show) {
       document.body.classList.add('modal-open');
-      modalRef.current?.focus();
+      setTimeout(() => modalRef.current?.focus(), 100);
       onOpen?.();
     } else {
       document.body.classList.remove('modal-open');
@@ -64,51 +50,39 @@ function Modal({
 
   if (!show) return null;
 
-  const handleBackdropClick = (e) => {
-    if (backdrop && e.target === backdropRef.current) {
-      onClose?.();
-    }
-  };
-
   return (
-    <>
-      {/* Backdrop - гарантированное затемнение */}
-      {backdrop && (
     <div 
-          ref={backdropRef}
-          className="modal-backdrop fade show" 
-          onClick={handleBackdropClick}
-          style={{ 
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            zIndex: 1050
-          }}
-        />
-      )}
-      
-      {/* Modal */}
-      <div 
-        className={`modal fade show d-block ${className}`}
-        tabIndex="-1" 
+      className={`modal show d-block ${className}`}
       role="dialog" 
       aria-modal="true"
-        style={{ 
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          overflow: 'auto',
-          zIndex: 1055 
+      style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
+      onKeyDown={(e) => { if (e.key === 'Escape') onClose?.(); }}
+    >
+      <div 
+        className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}
+        role="document"
+      >
+        <div 
+          className="modal-content" 
+          ref={modalRef}
+          tabIndex={-1}
+          onKeyDown={(e) => {
+            if (e.key === 'Tab') {
+              const c = e.currentTarget;
+              const focusable = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+              if (!focusable || focusable.length === 0) return;
+              const first = focusable[0];
+              const last = focusable[focusable.length - 1];
+              if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+              } else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
+              }
+            }
           }}
-        ref={modalRef}
         >
-        <div className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}>
-          <div className="modal-content">
           {title && (
             <div className="modal-header">
               <h5 className="modal-title">{title}</h5>
@@ -133,21 +107,15 @@ function Modal({
         </div>
       </div>
     </div>
-    </>
   );
 }
 
 export default Modal;
 
 /**
- * ===================================
- * ГОТОВЫЕ ПРЕСЕТЫ ДЛЯ РАЗНЫХ ЦЕЛЕЙ
- * ===================================
+ * Готовые пресеты для быстрого использования
  */
 
-/**
- * Компактная модалка для быстрых подтверждений
- */
 export function SmallModal({ show, onClose, title, children, footer, ...props }) {
   return (
     <Modal
@@ -164,9 +132,6 @@ export function SmallModal({ show, onClose, title, children, footer, ...props })
   );
 }
 
-/**
- * Большая модалка для сложного контента
- */
 export function LargeModal({ show, onClose, title, children, footer, scrollable = true, ...props }) {
   return (
     <Modal
@@ -184,9 +149,6 @@ export function LargeModal({ show, onClose, title, children, footer, scrollable
   );
 }
 
-/**
- * Модалка на весь экран
- */
 export function FullscreenModal({ show, onClose, title, children, footer, ...props }) {
   return (
     <Modal