From ad268a7c132c12d3efac54c21d1a75a97465c178 Mon Sep 17 00:00:00 2001
From: 0x1d <admin@dcentral.systems>
Date: Thu, 23 Oct 2025 13:41:14 +0200
Subject: [PATCH] feat: harmonize labels

---
 .../components/FirmwareFormComponent.js       | 30 ++++----
 public/styles/main.css                        | 75 ++++++++++++++++---
 2 files changed, 82 insertions(+), 23 deletions(-)

diff --git a/public/scripts/components/FirmwareFormComponent.js b/public/scripts/components/FirmwareFormComponent.js
index 5787417..c6ac878 100644
--- a/public/scripts/components/FirmwareFormComponent.js
+++ b/public/scripts/components/FirmwareFormComponent.js
@@ -83,13 +83,15 @@ class FirmwareFormComponent extends Component {
 
         const labels = this.firmwareData?.labels || {};
         const labelsHTML = Object.entries(labels).map(([key, value]) => 
-            `<div class="label-item">
-                <span class="label-key">${this.escapeHtml(key)}</span>
-                <span class="label-value">${this.escapeHtml(value)}</span>
+            `<div class="label-item" data-key="${this.escapeHtml(key)}">
+                <div class="label-content">
+                    <span class="label-key">${this.escapeHtml(key)}</span>
+                    <span class="label-separator">=</span>
+                    <span class="label-value">${this.escapeHtml(value)}</span>
+                </div>
                 <button type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
-                        <line x1="18" y1="6" x2="6" y2="18"/>
-                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                        <path d="M18 6L6 18M6 6l12 12"/>
                     </svg>
                 </button>
             </div>`
@@ -202,7 +204,7 @@ class FirmwareFormComponent extends Component {
         }
         
         // Check if key already exists
-        const existingLabel = labelsContainer.querySelector(`[data-label-key="${this.escapeHtml(key)}"]`);
+        const existingLabel = labelsContainer.querySelector(`[data-key="${this.escapeHtml(key)}"]`);
         if (existingLabel) {
             this.showError('A label with this key already exists');
             return;
@@ -210,13 +212,15 @@ class FirmwareFormComponent extends Component {
         
         // Add the label
         const labelHTML = `
-            <div class="label-item">
-                <span class="label-key">${this.escapeHtml(key)}</span>
-                <span class="label-value">${this.escapeHtml(value)}</span>
+            <div class="label-item" data-key="${this.escapeHtml(key)}">
+                <div class="label-content">
+                    <span class="label-key">${this.escapeHtml(key)}</span>
+                    <span class="label-separator">=</span>
+                    <span class="label-value">${this.escapeHtml(value)}</span>
+                </div>
                 <button type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
-                        <line x1="18" y1="6" x2="6" y2="18"/>
-                        <line x1="6" y1="6" x2="18" y2="18"/>
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                        <path d="M18 6L6 18M6 6l12 12"/>
                     </svg>
                 </button>
             </div>
diff --git a/public/styles/main.css b/public/styles/main.css
index d7ad3eb..00bd59b 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -733,34 +733,89 @@ p {
     font-weight: 600;
 }
 
+/* General labels container - flex layout for chips */
 .labels-container {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
 }
 
-.label-item {
+/* Firmware form labels container - block layout for full-width items */
+.firmware-form .labels-container {
+    display: block;
+}
+
+/* Firmware form label items - match node details drawer styling */
+.firmware-form .label-item {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    justify-content: space-between;
     padding: 0.75rem;
     background: var(--bg-tertiary);
-    border: 1px solid var(--border-secondary);
+    border: 1px solid var(--border-primary);
     border-radius: 8px;
+    margin-bottom: 0.5rem;
+    transition: all 0.2s ease;
 }
 
-.label-key {
-    font-weight: 600;
-    color: var(--text-primary);
-    min-width: 80px;
+.firmware-form .label-item:hover {
+    background: var(--bg-hover);
+    border-color: var(--border-secondary);
 }
 
-.label-value {
+.firmware-form .label-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
     flex: 1;
-    color: var(--text-primary);
 }
 
-/* Remove-label-btn styling moved to icon-only button section */
+.firmware-form .label-key {
+    font-weight: 600;
+    color: var(--accent-primary);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
+.firmware-form .label-separator {
+    color: var(--text-tertiary);
+    font-weight: 500;
+}
+
+.firmware-form .label-value {
+    color: var(--text-primary);
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
+.firmware-form .label-remove-btn,
+.firmware-form .remove-label-btn {
+    background: transparent;
+    border: 1px solid var(--border-secondary);
+    color: var(--text-tertiary);
+    border-radius: 6px;
+    padding: 0.25rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.firmware-form .label-remove-btn:hover,
+.firmware-form .remove-label-btn:hover {
+    background: var(--accent-error);
+    border-color: var(--accent-error);
+    color: white;
+}
+
+.firmware-form .label-remove-btn svg,
+.firmware-form .remove-label-btn svg {
+    width: 14px;
+    height: 14px;
+    stroke: currentColor;
+    stroke-width: 2;
+}
 
 .firmware-form .firmware-actions {
     display: flex !important;