feat: Замена базового компонента Modal на SmallModal в ConfirmDialog, ConfirmDiffModal и ConfirmModal для улучшения компактности и унификации интерфейса. Обновление стилей и добавление иконок для улучшения визуального восприятия.

frontend/src/components/Modal.jsx

@@ -1,18 +1,30 @@
 import { useEffect, useRef } from 'react';
-import { IconX } from '@tabler/icons-react';
 
 /**
- * Универсальный Modal компонент
- * Использует нативный Tabler UI стиль
+ * Универсальный 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 классы
  */
 function Modal({ 
   show, 
   onClose, 
-  onOpen, // колбэк при открытии модалки
+  onOpen,
   title, 
   children, 
   footer,
-  size = 'md', // sm, md, lg, xl
+  size = 'md',
   backdrop = true,
   keyboard = true,
   scrollable = false,
@@ -26,9 +38,7 @@ function Modal({
   useEffect(() => {
     if (show) {
       document.body.classList.add('modal-open');
-      // Trap focus внутри модалки
       modalRef.current?.focus();
-      // Вызов колбэка при открытии
       onOpen?.();
     } else {
       document.body.classList.remove('modal-open');
@@ -43,7 +53,9 @@ function Modal({
   useEffect(() => {
     if (keyboard && show) {
       const handleEsc = (e) => {
-        if (e.key === 'Escape') onClose?.();
+        if (e.key === 'Escape') {
+          onClose?.();
+        }
       };
       document.addEventListener('keydown', handleEsc);
       return () => document.removeEventListener('keydown', handleEsc);
@@ -60,13 +72,23 @@ function Modal({
 
   return (
     <>
-      {/* Backdrop */}
-      <div 
-        ref={backdropRef}
-        className="modal-backdrop fade show" 
-        onClick={handleBackdropClick}
-        style={{ zIndex: 1050 }}
-      />
+      {/* 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 
@@ -74,7 +96,15 @@ function Modal({
         tabIndex="-1" 
         role="dialog"
         aria-modal="true"
-        style={{ zIndex: 1055 }}
+        style={{ 
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          overflow: 'auto',
+          zIndex: 1055 
+        }}
         ref={modalRef}
       >
         <div className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${scrollable ? ' modal-dialog-scrollable' : ''}${centered ? ' modal-dialog-centered' : ''}`}>
@@ -109,3 +139,66 @@ function Modal({
 
 export default Modal;
 
+/**
+ * ===================================
+ * ГОТОВЫЕ ПРЕСЕТЫ ДЛЯ РАЗНЫХ ЦЕЛЕЙ
+ * ===================================
+ */
+
+/**
+ * Компактная модалка для быстрых подтверждений
+ */
+export function SmallModal({ show, onClose, title, children, footer, ...props }) {
+  return (
+    <Modal
+      show={show}
+      onClose={onClose}
+      title={title}
+      size="sm"
+      centered
+      footer={footer}
+      {...props}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+/**
+ * Большая модалка для сложного контента
+ */
+export function LargeModal({ show, onClose, title, children, footer, scrollable = true, ...props }) {
+  return (
+    <Modal
+      show={show}
+      onClose={onClose}
+      title={title}
+      size="lg"
+      centered
+      scrollable={scrollable}
+      footer={footer}
+      {...props}
+    >
+      {children}
+    </Modal>
+  );
+}
+
+/**
+ * Модалка на весь экран
+ */
+export function FullscreenModal({ show, onClose, title, children, footer, ...props }) {
+  return (
+    <Modal
+      show={show}
+      onClose={onClose}
+      title={title}
+      size="xl"
+      scrollable
+      footer={footer}
+      {...props}
+    >
+      {children}
+    </Modal>
+  );
+}