feat(MikrotikBackupsManager): add large modal for displaying backup content with improved UI

frontend/src/MikrotikBackupsManager.jsx

@@ -7,7 +7,7 @@ import TableSkeleton from './components/TableSkeleton.jsx';
 import EmptyState from './components/EmptyState.jsx';
 import Tooltip from './components/Tooltip.jsx';
 import DataTable from './components/DataTable.jsx';
-import { FullscreenModal } from './components/Modal.jsx';
+import { LargeModal, FullscreenModal } from './components/Modal.jsx';
 import { countryToFlag } from './utils/serverUtils.js';
 import {
   IconRefresh,
@@ -138,6 +138,7 @@ function MikrotikBackupsManager() {
   const [viewConfigKey, setViewConfigKey] = useState(null);
   const [viewConfigText, setViewConfigText] = useState('');
   const [viewLoading, setViewLoading] = useState(false);
+  const [viewModalOpen, setViewModalOpen] = useState(false);
   const [diffResult, setDiffResult] = useState(null);
   const [diffLoading, setDiffLoading] = useState(false);
   const [diffModalOpen, setDiffModalOpen] = useState(false);
@@ -382,6 +383,7 @@ function MikrotikBackupsManager() {
       setViewLoading(true);
       setViewConfigKey(key);
       setViewConfigText('');
+      setViewModalOpen(true);
       const res = await api.get('/mikrotik/backups/item', { params: { key } });
       setViewConfigText(res.data?.config || '');
     } catch (err) {
@@ -852,18 +854,18 @@ function MikrotikBackupsManager() {
         </div>
       </div>
 
-      {viewConfigKey && (
+      <LargeModal
-        <div className="row mt-4">
+        show={viewModalOpen}
-          <div className="col-12">
+        onClose={() => {
-            <div className="card">
+          setViewModalOpen(false);
-              <div className="card-header d-flex align-items-center justify-content-between">
+        }}
-                <div>
+        title="Содержимое бэкапа MikroTik"
-                  <div className="card-title mb-0">Содержимое бэкапа</div>
+        footer={(
-                  <div className="text-muted small text-truncate" title={viewConfigKey}>
+          <div className="d-flex justify-content-between w-100">
-                    {viewConfigKey}
+            <div className="text-muted small text-truncate" title={viewConfigKey || ''}>
+              {viewConfigKey || 'Бэкап не выбран'}
             </div>
-                </div>
+            <div className="btn-list mb-0">
-                <div className="btn-list">
               <button
                 type="button"
                 className="btn btn-outline-secondary btn-sm"
@@ -873,24 +875,28 @@ function MikrotikBackupsManager() {
                 <IconCopy size={16} className="me-1" />
                 Копировать
               </button>
+              <button
+                type="button"
+                className="btn btn-secondary btn-sm"
+                onClick={() => setViewModalOpen(false)}
+              >
+                Закрыть
+              </button>
             </div>
           </div>
-              <div className="card-body">
+        )}
+      >
         {viewLoading ? (
           <TableSkeleton rows={6} columns={1} />
         ) : (
           <pre
-                    className="mb-0"
+            className="bg-dark text-white p-3 rounded"
-                    style={{ maxHeight: 420, overflow: 'auto', fontSize: 12 }}
+            style={{ maxHeight: 500, overflow: 'auto', fontSize: 12 }}
           >
-                    {viewConfigText || '# Нет данных для отображения'}
+            <code>{viewConfigText || '# Нет данных для отображения'}</code>
           </pre>
         )}
-              </div>
+      </LargeModal>
-            </div>
-          </div>
-        </div>
-      )}
 
       <FullscreenModal
         show={diffModalOpen}