From 751d6bae4217ecb99076134f7b46221d06004701 Mon Sep 17 00:00:00 2001
From: Vladislav Kopnin <vlad.kopnen@mail.ru>
Date: Tue, 29 Sep 2026 16:09:39 +0300
Subject: [PATCH] Grade comments: dropdown matches input width, compact tone
 select, responsive wrap

---
 web/src/main/resources/static/css/app.css       | 11 +++++++----
 web/src/main/resources/static/js/admin-group.js | 12 +++++++++---
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/web/src/main/resources/static/css/app.css b/web/src/main/resources/static/css/app.css
index f1fa385..e2d9acc 100644
--- a/web/src/main/resources/static/css/app.css
+++ b/web/src/main/resources/static/css/app.css
@@ -304,11 +304,14 @@ code.code { padding: 0.125rem 0.5rem; border-radius: 0.25rem; font-family: monos
 .chip-neu { background: #5d6570; color: #fff; }
 .chip-neg { background: #b3283b; color: #fff; }
 /* Слоты комментариев в диалоге */
-.cs-row { display: flex; gap: 6px; align-items: center; position: relative; }
-.cs-row .cs-text { flex: 1 1 auto; min-width: 0; }
+.cs-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
+.cs-text-wrap { position: relative; flex: 1 1 12rem; min-width: 0; }
+.cs-text-wrap .cs-text { width: 100%; }
+.cs-row .cs-tone, .cs-row .btn { flex: 0 0 auto; }
+.cs-tone { max-width: 9rem; }
 .ac-list {
-    position: absolute; left: 0; top: 100%; margin-top: 2px; z-index: 20;
-    min-width: 100%; max-height: 14rem; overflow-y: auto;
+    position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px; z-index: 20;
+    max-height: 14rem; overflow-y: auto;
     background: var(--c-surface); border: 1px solid var(--c-border);
     border-radius: 0.4rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }
diff --git a/web/src/main/resources/static/js/admin-group.js b/web/src/main/resources/static/js/admin-group.js
index 9940639..c92885d 100644
--- a/web/src/main/resources/static/js/admin-group.js
+++ b/web/src/main/resources/static/js/admin-group.js
@@ -35,14 +35,19 @@ function csRow(text, tone) {
     var row = document.createElement('div');
     row.className = 'cs-row';
 
+    var wrap = document.createElement('div');
+    wrap.className = 'cs-text-wrap';
+
     var inp = document.createElement('input');
     inp.className = 'input cs-text';
     inp.placeholder = 'Комментарий';
     inp.value = text || '';
+    wrap.appendChild(inp);
 
     var sel = document.createElement('select');
     sel.className = 'input cs-tone';
-    [['positive', '＋ позитивный'], ['negative', '— негативный'], ['neutral', '○ нейтральный']].forEach(function (o) {
+    sel.title = 'Тональность комментария';
+    [['positive', '＋ позитив'], ['negative', '— негатив'], ['neutral', '○ нейтрал']].forEach(function (o) {
         var op = document.createElement('option');
         op.value = o[0];
         op.textContent = o[1];
@@ -56,7 +61,7 @@ function csRow(text, tone) {
     rm.textContent = 'удалить';
     rm.onclick = function () { row.remove(); };
 
-    row.appendChild(inp);
+    row.appendChild(wrap);
     row.appendChild(sel);
     row.appendChild(rm);
     box.appendChild(row);
@@ -138,7 +143,8 @@ function attachCommentAutocomplete(input) {
                 if (event.target.closest('.ac-del')) return;
                 event.preventDefault();
                 input.value = item.text;
-                var tone = input.parentNode.querySelector('.cs-tone');
+                var rowEl = input.closest('.cs-row');
+                var tone = rowEl ? rowEl.querySelector('.cs-tone') : null;
                 if (tone && item.tone) tone.value = item.tone;
                 hide();
             });