From bd829eb888ae17b0e0222882a11b60f33f2278b4 Mon Sep 17 00:00:00 2001
From: Ian Gulliver <git@flamingcow.io>
Date: Mon, 2 Feb 2026 11:42:26 -0800
Subject: [PATCH] Style remove button to match port label bubble

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/js/components.js |  2 +-
 static/js/table.js      |  2 +-
 static/style.css        | 23 ++++++++++++++++++++---
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/static/js/components.js b/static/js/components.js
index fa10e58..694a75d 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -312,7 +312,7 @@ export function createNodeElement(node, switchConnection, nodeLocation, uplinkIn
         if (!removeBtn) {
             removeBtn = document.createElement('button');
             removeBtn.className = 'remove-node-btn';
-            removeBtn.textContent = '×';
+            removeBtn.textContent = 'X';
             removeBtn.title = 'Remove node';
             removeBtn.addEventListener('click', (e) => {
                 e.stopPropagation();
diff --git a/static/js/table.js b/static/js/table.js
index 3833d92..269e001 100644
--- a/static/js/table.js
+++ b/static/js/table.js
@@ -300,7 +300,7 @@ export function renderNetworkTable() {
         html += '<td class="' + statusClass + '">' + r.status + '</td>';
         html += '<td>';
         if (r.removable) {
-            html += '<button class="remove-node-btn" data-node-id="' + escapeHtml(r.nodeId) + '" title="Remove node">×</button>';
+            html += '<button class="remove-node-btn" data-node-id="' + escapeHtml(r.nodeId) + '" title="Remove node">X</button>';
         }
         html += '</td>';
         html += '</tr>';
diff --git a/static/style.css b/static/style.css
index 590e5b3..dc9f149 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1056,7 +1056,8 @@ body.sacn-mode .node:not(.sacn-out):not(.sacn-in):hover .node-info-wrapper {
 .node:has(.uplink-hover:hover) .node-info-wrapper,
 .node:has(.dante-hover:hover) .node-info-wrapper,
 .node:has(.artnet-hover:hover) .node-info-wrapper,
-.node:has(.sacn-hover:hover) .node-info-wrapper {
+.node:has(.sacn-hover:hover) .node-info-wrapper,
+.node:has(.remove-node-btn:hover) .node-info-wrapper {
     display: none;
 }
 
@@ -1276,8 +1277,24 @@ body.sacn-mode .node:not(.sacn-out):not(.sacn-in):hover .node-info-wrapper {
 
 .node .remove-node-btn {
     position: absolute;
-    bottom: 2px;
-    right: 2px;
+    top: -8px;
+    right: -4px;
+    width: auto;
+    height: auto;
+    padding: 1px 6px;
+    font-size: 10px;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #833;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+}
+
+.node .remove-node-btn:hover {
+    background: #a44;
 }
 
 .data-table .remove-node-btn {