From b3050ec4a7405d07772b37a636eef2e75ed16cac Mon Sep 17 00:00:00 2001
From: "Satur@it-depot.ru" <Saturn@it-depot.ru>
Date: Thu, 6 Mar 2025 13:04:00 +0300
Subject: [PATCH] fix 3

---
 templates/index.html | 139 ++++++++++++++++++++++++++++++++++++-------
 1 file changed, 119 insertions(+), 20 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 7b0f049..f4c9506 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,27 +9,91 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css">
     <style>
         body { display: flex; font-family: Arial, sans-serif; margin: 0; }
-        #tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; } /* Уменьшаем до 15% */
-        #installs-container { width: 60%; padding: 10px; position: relative; } /* Увеличиваем до 60% */
+        #tree-container { width: 15%; padding: 10px; border-right: 1px solid #ccc; }
+        #installs-container { width: 60%; padding: 10px; position: relative; }
         .install-item { display: table; width: 100%; border-collapse: collapse; margin: 2px 0; background: #fff; cursor: move; }
         .install-item.selected { background-color: #e6f7ff; } /* Подсветка выбранного пункта */
-        .install-item > div { display: table-cell; vertical-align: middle; padding: 5px; text-align: center; position: relative; }
-        .install-item .computer-name { width: 20%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .install-item .connection-id { width: 30%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .install-item .install-time { width: 25%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-        .install-item .actions { width: 25%; }
+        .install-item > div { 
+            display: table-cell; 
+            vertical-align: middle; 
+            padding: 5px; 
+            text-align: center; 
+            position: relative;
+        }
+        .install-item .computer-name { 
+            width: 20%; 
+            max-width: 0; 
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .install-item .connection-id { 
+            width: 30%; 
+            max-width: 0; 
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .install-item .install-time { 
+            width: 25%; 
+            max-width: 0; 
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        .install-item .actions { 
+            width: 25%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
         .form-container { margin-bottom: 20px; }
         .jstree-node { position: relative; }
-        .folder-actions { display: none; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); margin-left: 0; } /* Сдвигаем кнопки вправо и центрируем по вертикали */
+        .folder-actions { 
+            display: none; 
+            position: absolute; 
+            right: 5px; 
+            top: 50%; 
+            transform: translateY(-50%); 
+            margin-left: 0; 
+        }
         #search-container { position: absolute; top: 10px; right: 10px; text-align: right; }
         #search-input { width: 200px; margin-bottom: 5px; }
-        #installs-list { margin-top: 0; } /* Убираем верхний отступ, чтобы таблица начиналась сразу после заголовка */
+        #installs-list { margin-top: 0; }
         .header { display: table; width: 100%; border-collapse: collapse; background: #f0f0f0; cursor: pointer; }
-        .header > div { display: table-cell; padding: 5px; text-align: center; font-weight: bold; }
+        .header > div { 
+            display: table-cell; 
+            padding: 5px; 
+            text-align: center; 
+            font-weight: bold; 
+        }
         .header > div:hover { background: #e0e0e0; }
         .sort-arrow { font-size: 12px; margin-left: 5px; }
-        .protocol-icon { margin-right: 5px; height: 16px; width: 16px; vertical-align: middle; }
-        .connection-link { color: blue; text-decoration: underline; cursor: pointer; }
+        .protocol-icon { 
+            margin-right: 5px; 
+            height: 16px; 
+            width: 16px; 
+            vertical-align: middle; 
+        }
+        .connection-link { 
+            color: blue; 
+            text-decoration: underline; 
+            cursor: pointer; 
+            margin-right: 3px; /* Отступ для баланса */
+        }
         .edit-button {
             background: #fff;
             color: #007bff;
@@ -37,7 +101,7 @@
             padding: 2px 5px;
             border-radius: 3px;
             cursor: pointer;
-            margin-left: 5px;
+            margin: 0 2px; /* Уменьшенный отступ для центрирования */
             transition: background 0.2s ease;
         }
         .edit-button:hover {
@@ -51,7 +115,7 @@
             padding: 2px 5px;
             border-radius: 3px;
             cursor: pointer;
-            margin-left: 5px;
+            margin: 0 2px; /* Уменьшенный отступ для центрирования */
             transition: background 0.2s ease;
         }
         .copy-button:hover {
@@ -59,23 +123,58 @@
             color: #218838;
         }
         .action-buttons { margin-left: 5px; }
-        .action-buttons button { margin-left: 5px; }
+        .action-buttons button { margin: 0 2px; } /* Уменьшенный отступ для центрирования */
         #import-form { margin-top: 5px; }
         #import-file { display: none; }
-        #import-label { cursor: pointer; background: #007bff; color: white; padding: 5px 10px; border-radius: 3px; margin-left: 5px; }
+        #import-label { 
+            cursor: pointer; 
+            background: #007bff; 
+            color: white; 
+            padding: 5px 10px; 
+            border-radius: 3px; 
+            margin-left: 5px; 
+        }
         #import-label:hover { background: #0056b3; }
         .folder-select { margin-bottom: 5px; width: 150px; }
         .time-hint { font-size: 12px; color: #666; margin-top: 5px; }
-        #notes-panel { width: 25%; padding: 10px; border-left: 1px solid #ccc; background: #f9f9f9; min-height: 200px; margin-top: 240px; } /* Уменьшаем до 25% */
+        #notes-panel { 
+            width: 25%; 
+            padding: 10px; 
+            border-left: 1px solid #ccc; 
+            background: #f9f9f9; 
+            min-height: 200px; 
+            margin-top: 240px; 
+        }
         #notes-content { margin-top: 10px; }
-        #note-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0,0,0,0.3); z-index: 1000; width: 500px; }
+        #note-modal { 
+            display: none; 
+            position: fixed; 
+            top: 50%; 
+            left: 50%; 
+            transform: translate(-50%, -50%); 
+            background: white; 
+            padding: 20px; 
+            border: 1px solid #ccc; 
+            box-shadow: 0 0 10px rgba(0,0,0,0.3); 
+            z-index: 1000; 
+            width: 500px; 
+        }
         #note-modal .markdown-buttons { margin-bottom: 10px; }
         #note-modal .markdown-buttons button { margin-right: 5px; padding: 5px 10px; }
         #note-modal textarea { width: 100%; height: 200px; margin-bottom: 10px; }
         #note-modal button { margin-right: 10px; }
-        #modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
+        #modal-overlay { 
+            display: none; 
+            position: fixed; 
+            top: 0; 
+            left: 0; 
+            width: 100%; 
+            height: 100%; 
+            background: rgba(0,0,0,0.5); 
+            z-index: 999; 
+        }
         .header-logo { display: flex; align-items: center; }
-        .header-logo img { height: 50px; margin-right: 10px; } /* Логотип 50x50 пикселей */
+        .header-logo img { height: 50px; margin-right: 10px; }
     </style>
 </head>
 <body>