sync

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

@@ -1757,12 +1757,42 @@ button.report-tag--filter:hover {
   opacity: 0.55;
   outline: 2px dashed var(--accent);
 }
+.graphs-grid .card.card--lift h3.graph-brick-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 .graph-brick-drag-handle {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin: -2px 0;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface2);
+  color: var(--text);
+  font: inherit;
+  line-height: 1;
   cursor: grab;
   user-select: none;
-  font-size: 0.75rem;
+  touch-action: none;
-  color: var(--muted);
+}
-  margin-left: 0.35rem;
+.graph-brick-drag-handle:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--row-hover);
+}
+.graph-brick-drag-handle:active {
+  cursor: grabbing;
+}
+.graph-brick-drag-grip {
+  font-size: 12px;
+  letter-spacing: -2px;
+  pointer-events: none;
 }
 .graph-brick-tip {
   position: absolute;

examples/crash_reporter/backend/public/assets/i18n/en.json

@@ -62,6 +62,7 @@
   "col.expand": "Expand",
   "col.drag": "Drag column",
   "col.drag_reorder": "Drag column to reorder",
+  "graphs.brick_drag": "Drag chart to reorder",
   "row.show_summary": "Show summary",
   "row.open_report": "Click to open full report",
   "row.edit_tags": "Edit tags",

examples/crash_reporter/backend/public/assets/i18n/ru.json

@@ -72,6 +72,7 @@
   "col.expand": "Развернуть",
   "col.drag": "Перетащить столбец",
   "col.drag_reorder": "Перетащите для смены порядка столбцов",
+  "graphs.brick_drag": "Перетащите график для смены порядка",
   "row.show_summary": "Показать сводку",
   "row.open_report": "Нажмите, чтобы открыть полный отчёт",
   "row.edit_tags": "Редактировать метки",

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

@@ -487,12 +487,17 @@
         card.setAttribute('data-brick-id', kpi.id.replace(/^graph-/, ''));
       }
       if (title && !title.querySelector('.graph-brick-drag-handle')) {
-        const handle = document.createElement('span');
+        title.classList.add('graph-brick-head');
+        const dragLabel =
+          (typeof window.t === 'function' && window.t('graphs.brick_drag')) || 'Drag to reorder';
+        const handle = document.createElement('button');
+        handle.type = 'button';
         handle.className = 'graph-brick-drag-handle';
-        handle.textContent = '⋮⋮';
-        handle.title = 'Drag to reorder';
         handle.setAttribute('draggable', 'true');
-        title.appendChild(handle);
+        handle.setAttribute('aria-label', dragLabel);
+        handle.title = dragLabel;
+        handle.innerHTML = '<span class="graph-brick-drag-grip" aria-hidden="true">⋮⋮</span>';
+        title.insertBefore(handle, title.firstChild);
       }
       if (canvas && !card.querySelector('.graph-brick-tip')) {
         const tip = document.createElement('p');