Grade comments: dropdown matches input width, compact tone select, responsive wrap

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();
             });