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/layout.css

@@ -23,6 +23,10 @@ table.xf-table thead tr.filter-row { display: none !important; }
 
 .master-table:not(#table-custom) thead { position: sticky; top: var(--sticky-top, 112px); z-index: 20; }
 
+/* A Workbench stack never needs to scroll sideways, and a sideways-scrolling box captures its
+   sticky header (which then sits over the device list on phones) */
+.stack-box.table-wrapper { overflow: visible !important; }
+
 @media (min-width: 1101px) {
     /* An overflowing wrapper would capture the sticky header; these tables never need to
        scroll sideways at desktop widths (they're fixed-layout, 100% wide) */
@@ -223,9 +227,6 @@ body { padding-bottom: var(--dock-h, 40px) !important; }
     .modal-header { padding: 14px 14px 8px; }
     .modal-header h2 { font-size: 1.2em; word-break: break-all; }
 
-    /* Details title: the Advanced/Simple View button gets its own line under the device
-       name instead of floating over the content */
-    #detailsTitle button { float: none !important; display: block; margin: 10px 0 0 !important; font-size: 0.65em !important; }
 
     /* Device details: Advanced View's source / overview / destination columns stack,
        and the whole dialog scrolls instead of each column scrolling separately */
@@ -332,7 +333,7 @@ table.xf-table thead th:has(> .xf-btn):not(.sortable-th) { position: relative; p
 .xf-bar { display: none; }
 @media (max-width: 1100px) {
     .xf-bar {
-        display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; scrollbar-width: none;
+        display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; overflow: visible;   /* chips wrap: no sideways scrolling */
         position: sticky; top: var(--sticky-top, 112px); z-index: 25;
         background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), var(--bg-card);
         border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 8px rgba(0,0,0,0.25);
@@ -360,6 +361,23 @@ table.xf-table thead th:has(> .xf-btn):not(.sortable-th) { position: relative; p
     background: transparent; color: inherit; border: 1px solid var(--border-color); border-radius: 6px;
 }
 .xf-mini:disabled { opacity: 0.3; cursor: default; }
+.xf-mini { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
+.xf-mini svg { width: 17px; height: 17px; }
+.xf-mini:hover:not(:disabled) { border-color: #3498db; color: #3498db; }
+.xf-mini.xf-mini-x:hover:not(:disabled) { border-color: #e74c3c; color: #e74c3c; }
+
+/* Card fields: the same dialog frame as the device details */
+.xf-fields-overlay .modal-content.xf-fields-sheet {
+    width: 85%; max-width: 550px; margin: 80px auto 20px; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px);
+    display: flex; flex-direction: column; overflow: hidden; font-size: 15px;
+}
+.xf-fields-sheet .modal-header { flex: none; }
+.xf-fields-sheet .xf-fields-title { margin: 0; }
+.xf-fields-sheet .xf-hint { padding: 12px 20px 8px; }
+.xf-fields-sheet .xf-fields { padding: 0 20px; }
+.xf-fields-sheet .xf-add { padding: 0 20px; }
+.xf-fields-sheet .xf-actions { padding: 12px 20px 16px; }
+.xf-fields-sheet .xf-actions button { flex: 1; padding: 11px; }
 .xf-add { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 8px; }
 .xf-fields-sheet .xf-list { flex: 1 1 auto; min-height: 110px; }
 .xf-fields-sheet .xf-add .xf-search { flex: none; }
@@ -476,9 +494,10 @@ a.nav-brand:hover h2 { color: #d6eaf8; }
 a.nav-brand:focus-visible { outline: 2px solid #3498db; outline-offset: 3px; }
 
 /* Device details title: name on the left, Simple / Advanced View toggle on the right, one line */
-#detailsTitle { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; padding-right: 10px; min-width: 0; }
-/* the name gives way (ellipsis) so the toggle never drops to a second line */
-#detailsTitle .dt-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* The dialog is wide enough for name + toggle on one line; on a phone that can't fit both,
+   the toggle moves under the name rather than cutting the name off */
+#detailsTitle { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 10px; min-width: 0; }
+#detailsTitle .dt-name { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
 #detailsTitle .dt-name .copy-row-btn { vertical-align: middle; }
 #detailsTitle .dt-toggle { flex: 0 0 auto; }
 #detailsTitle .dt-toggle {