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]) =>
- `
-
${this.escapeHtml(key)}
-
${this.escapeHtml(value)}
+ `
+
+ ${this.escapeHtml(key)}
+ =
+ ${this.escapeHtml(value)}
+
`
@@ -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 = `
-
-
${this.escapeHtml(key)}
-
${this.escapeHtml(value)}
+
+
+ ${this.escapeHtml(key)}
+ =
+ ${this.escapeHtml(value)}
+
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;