From 3e2fa793253a528e73df77261cf0c30423da496d Mon Sep 17 00:00:00 2001
From: Ian Gulliver <git@flamingcow.io>
Date: Mon, 26 Jan 2026 13:40:38 -0800
Subject: [PATCH] Improve mode styling and fix bubble overflow

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/index.html | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/static/index.html b/static/index.html
index 568734e..bc62535 100644
--- a/static/index.html
+++ b/static/index.html
@@ -133,6 +133,8 @@
             padding: 1px 6px;
             border-radius: 8px;
             white-space: nowrap;
+            overflow: visible;
+            max-width: none;
         }
 
         .node .switch-port.external {
@@ -211,6 +213,8 @@
             padding: 1px 6px;
             border-radius: 8px;
             white-space: nowrap;
+            overflow: visible;
+            max-width: none;
         }
 
         .node .root-label {
@@ -348,11 +352,18 @@
             padding: 1px 6px;
             border-radius: 8px;
             white-space: nowrap;
-            background: #444;
             color: #fff;
             z-index: 10;
         }
 
+        .node .dante-info.tx-info {
+            background: #853;
+        }
+
+        .node .dante-info.rx-info {
+            background: #357;
+        }
+
         .node .dante-info .dante-detail {
             display: none;
             position: absolute;
@@ -429,7 +440,7 @@
 
         body.artnet-mode .node.artnet-out {
             opacity: 1;
-            background: #2a2;
+            background: #a62;
         }
 
         body.artnet-mode .node.artnet-in {
@@ -438,7 +449,7 @@
         }
 
         body.artnet-mode .node.artnet-out.artnet-in {
-            background: linear-gradient(135deg, #2a2 50%, #26d 50%);
+            background: linear-gradient(135deg, #a62 50%, #26d 50%);
         }
 
         body.artnet-mode .node .switch-port,
@@ -458,11 +469,18 @@
             padding: 1px 6px;
             border-radius: 8px;
             white-space: nowrap;
-            background: #444;
             color: #fff;
             z-index: 10;
         }
 
+        .node .artnet-info.out-info {
+            background: #753;
+        }
+
+        .node .artnet-info.in-info {
+            background: #357;
+        }
+
         .node .artnet-info .artnet-detail {
             display: none;
             position: absolute;
@@ -559,7 +577,7 @@
             padding: 1px 6px;
             border-radius: 8px;
             white-space: nowrap;
-            background: #444;
+            background: #357;
             color: #fff;
             z-index: 10;
         }