From dca2d212b120b2c36a22f178d3d634afa9f19191 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Wed, 25 Mar 2026 23:56:30 +0300
Subject: [PATCH] fix: clip graph node title and subtitle to prevent overflow

Long entity names overflowed past the icon area on graph cards.
Added SVG clipPath to constrain text within the node bounds.
---
 server/src/wled_controller/static/js/core/graph-nodes.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/server/src/wled_controller/static/js/core/graph-nodes.ts b/server/src/wled_controller/static/js/core/graph-nodes.ts
index eb5cdd3..7d75821 100644
--- a/server/src/wled_controller/static/js/core/graph-nodes.ts
+++ b/server/src/wled_controller/static/js/core/graph-nodes.ts
@@ -336,10 +336,17 @@ function renderNode(node: GraphNode, callbacks: NodeCallbacks): SVGElement {
         g.appendChild(dot);
     }
 
+    // Clip path for title/subtitle text (prevent overflow past icon area)
+    const clipId = `clip-text-${id.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    const clipPath = svgEl('clipPath', { id: clipId });
+    clipPath.appendChild(svgEl('rect', { x: 14, y: 0, width: width - 48, height }));
+    g.appendChild(clipPath);
+
     // Title (shift left edge for icon to have room)
     const title = svgEl('text', {
         class: 'graph-node-title',
         x: 16, y: 24,
+        'clip-path': `url(#${clipId})`,
     });
     title.textContent = name;
     g.appendChild(title);
@@ -349,6 +356,7 @@ function renderNode(node: GraphNode, callbacks: NodeCallbacks): SVGElement {
         const sub = svgEl('text', {
             class: 'graph-node-subtitle',
             x: 16, y: 42,
+            'clip-path': `url(#${clipId})`,
         });
         sub.textContent = subtype.replace(/_/g, ' ');
         g.appendChild(sub);