sync be

examples/crash_reporter/backend/public/assets/css/app.css

@@ -469,15 +469,20 @@ a:hover { text-decoration: underline; }
   padding-right: 8px;
   min-height: 1.5rem;
 }
-.th-drag {
+.data-table th.th-draggable {
   cursor: grab;
+  user-select: none;
+}
+.data-table th.th-draggable:active {
+  cursor: grabbing;
+}
+.th-drag {
   color: var(--muted);
   font-size: 11px;
   letter-spacing: -2px;
   user-select: none;
   flex-shrink: 0;
 }
-.th-drag:active { cursor: grabbing; }
 .th-label { flex: 1; min-width: 0; }
 .th-draggable.th-dragging { opacity: .45; }
 .th-draggable.th-dragging .th-label {

examples/crash_reporter/backend/public/assets/js/app.js

@@ -350,13 +350,17 @@
     table.dataset.layoutBound = '1';
 
     thead.addEventListener('dragstart', (e) => {
-      const handle = e.target.closest('.th-drag');
+      if (ctx.getGrouped()) return;
-      if (!handle || ctx.getGrouped()) return;
+      if (e.target.closest('.col-resizer')) {
-      const sourceKey = handle.getAttribute('data-col-key');
+        e.preventDefault();
+        return;
+      }
+      const th = e.target.closest('th.th-draggable[data-col-key]');
+      if (!th) return;
+      const sourceKey = th.getAttribute('data-col-key');
       if (!sourceKey) return;
       table.dataset.dragColKey = sourceKey;
-      const th = handle.closest('th');
+      th.classList.add('th-dragging');
-      if (th) th.classList.add('th-dragging');
       const label = columnLabelByKey(sourceKey);
       const ghost = document.createElement('div');
       ghost.className = 'col-drag-ghost';
@@ -698,16 +702,19 @@
           active ? (dir === 'asc' ? '▲' : '▼') : '<span class="sort-idle">↕</span>';
         const w = widths[c.key] ? ' style="width:' + widths[c.key] + 'px"' : '';
         let thClass = 'sortable' + (active ? ' sortable--active' : '');
-        let thDrag = '';
+        let thDragAttrs = '';
         if (!grouped) {
           thClass += ' th-draggable';
-          thDrag = ' data-col-key="' + escapeHtml(c.key) + '"';
+          thDragAttrs =
+            ' draggable="true" data-col-key="' +
+            escapeHtml(c.key) +
+            '" title="Drag column to reorder"';
         }
         html +=
           '<th class="' +
           thClass +
           '"' +
-          thDrag +
+          thDragAttrs +
           ' data-sort="' +
           escapeHtml(c.key) +
           '"' +
@@ -715,9 +722,7 @@
           ' scope="col"><span class="th-inner">' +
           (grouped
             ? ''
-            : '<span class="th-drag" draggable="true" data-col-key="' +
+            : '<span class="th-drag" aria-hidden="true" title="Drag column">⋮⋮</span>') +
-              escapeHtml(c.key) +
-              '" title="Drag to reorder column" aria-hidden="true">⋮⋮</span>') +
           '<span class="th-label">' +
           escapeHtml(c.label) +
           '</span> <span class="sort-ind" aria-hidden="true">' +
@@ -733,7 +738,7 @@
       thead.innerHTML = html;
       thead.querySelectorAll('.sortable').forEach((th) => {
         th.addEventListener('click', (e) => {
-          if (e.target.closest('.col-resizer') || e.target.closest('.th-drag')) return;
+          if (e.target.closest('.col-resizer')) return;
           const key = th.getAttribute('data-sort');
           if (!key) return;
           if (sort === key) {
@@ -1060,16 +1065,17 @@
         }
       });
     }
-    function appendSearchTerm(term) {
+    function selectSearchSuggestion(term) {
       if (!searchInput) return;
       const t = (term || '').trim();
       if (!t) return;
-      const cur = searchInput.value.trim();
+      const raw = searchInput.value;
-      if (!cur) {
+      const withoutTrailing = raw.replace(/\s+$/, '');
-        searchInput.value = t;
+      const lastSpace = withoutTrailing.lastIndexOf(' ');
-      } else if (!cur.toLowerCase().includes(t.toLowerCase())) {
+      searchInput.value =
-        searchInput.value = cur + ' ' + t;
+        lastSpace < 0
-      }
+          ? t
+          : withoutTrailing.slice(0, lastSpace + 1) + t;
       if (searchClear) searchClear.hidden = !searchInput.value.trim();
       searchInput.focus();
     }
@@ -1078,7 +1084,7 @@
         const btn = e.target.closest('[data-suggest]');
         if (!btn) return;
         const term = btn.getAttribute('data-suggest') || '';
-        appendSearchTerm(term);
+        selectSearchSuggestion(term);
         hideSuggest();
       });
     }