Wider details dialog, Card fields dialog like device details, no sideways chip scroll

- Details dialog is wider so the device name is never cut off.
- Overview list rows use the USMT Status colors (row color, ping color).
- Workbench on phones: the stack header no longer sits over the device list.
- Card fields uses the device-details dialog frame; bolder arrows; x to remove.
- Filter chips wrap onto more lines instead of scrolling sideways.

web/excel-filter.js

@@ -657,8 +657,10 @@
     document.addEventListener('mousedown', e => {
         if (menu && !menu.contains(e.target) && !(e.target.closest && e.target.closest('.xf-btn, .xf-chip, .col-filter-btn'))) closeMenu();
     }, true);
-    window.addEventListener('scroll', () => { if (menu && !menu.classList.contains('xf-sheet')) closeMenu(); }, { passive: true });
-    window.addEventListener('resize', closeMenu);
+    // the card-field dialog stays open through scrolling and the phone keyboard resizing the page
+    const keepOpen = () => menuCtx && menuCtx.fields;
+    window.addEventListener('scroll', () => { if (menu && !keepOpen() && !menu.classList.contains('xf-sheet')) closeMenu(); }, { passive: true });
+    window.addEventListener('resize', () => { if (!keepOpen()) closeMenu(); });
 
     // ------------------------------------------------------------------------------------
     //  Custom View card fields (phones/tablets): choose and order what each card shows
@@ -666,11 +668,14 @@
     function openFieldEditor() {
         closeMenu();
         if (typeof customColumns === 'undefined') return;
-        backdrop = el('div', 'xf-backdrop'); backdrop.onclick = closeMenu;
-        menu = el('div', 'xf-menu xf-sheet xf-fields-sheet');
+        // Same frame as the device details dialog: under the nav, full width on phones
+        backdrop = el('div', 'modal-overlay xf-fields-overlay');
+        backdrop.style.display = 'block';
+        backdrop.onclick = e => { if (e.target === backdrop) closeMenu(); };
+        menu = el('div', 'modal-content xf-fields-sheet');
         menuCtx = { fields: true };
+        backdrop.appendChild(menu);
         document.body.appendChild(backdrop);
-        document.body.appendChild(menu);
         document.addEventListener('keydown', onMenuKey, true);
         renderFieldEditor();
     }
@@ -679,10 +684,10 @@
         if (!menu) return;
         const label = id => { try { return getCustomColDef(id).label; } catch (e) { return id; } };
         menu.innerHTML = '';
-        const head = el('div', 'xf-head');
-        head.appendChild(el('span', 'xf-title', 'Card fields'));
-        const x = el('button', 'xf-x', '×'); x.type = 'button'; x.onclick = closeMenu;
+        const head = el('div', 'modal-header');
+        const x = el('span', 'close-modal', '\u00d7'); x.title = 'Close'; x.onclick = closeMenu;
         head.appendChild(x);
+        head.appendChild(el('h2', 'xf-fields-title', 'Card fields'));
         menu.appendChild(head);
         menu.appendChild(el('div', 'xf-hint', 'Choose what each card shows and in what order. The first field is the card title.'));
 
@@ -691,14 +696,15 @@
             const row = el('div', 'xf-field');
             row.appendChild(el('span', 'xf-field-name', label(id)));
             if (i === 0) row.appendChild(el('span', 'xf-badge', 'Title'));
-            const btn = (txt, title, fn, disabled) => {
-                const b = el('button', 'xf-mini', txt); b.type = 'button'; b.title = title; b.disabled = !!disabled;
+            const btn = (svg, title, fn, disabled, cls) => {
+                const b = el('button', 'xf-mini' + (cls ? ' ' + cls : '')); b.type = 'button'; b.title = title; b.disabled = !!disabled;
+                b.innerHTML = svg; b.setAttribute('aria-label', title);
                 b.onclick = () => { fn(); renderFieldEditor(); };
                 row.appendChild(b);
             };
-            btn('↑', 'Move up', () => moveCustomColumn(i, i - 1), i === 0);
-            btn('↓', 'Move down', () => moveCustomColumn(i, i + 1), i === customColumns.length - 1);
-            btn('−', 'Remove from cards', () => toggleCustomColumn(id), customColumns.length <= 1);
+            btn('<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 13V3M3.5 7.5 8 3l4.5 4.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>', 'Move up', () => moveCustomColumn(i, i - 1), i === 0);
+            btn('<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3.5 8.5 8 13l4.5-4.5" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>', 'Move down', () => moveCustomColumn(i, i + 1), i === customColumns.length - 1);
+            btn('<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>', 'Remove from cards', () => toggleCustomColumn(id), customColumns.length <= 1, 'xf-mini-x');
             shown.appendChild(row);
         });
         menu.appendChild(shown);