From 6e66f0152130c4f40ad35cff76d227750be94301 Mon Sep 17 00:00:00 2001
From: GitHub Copilot <copilot@github.com>
Date: Sat, 24 Jan 2026 18:44:43 +0000
Subject: [PATCH] Fix SVG structure: render background rects before text
 elements

Background rect elements were being inserted inside text elements,
causing invalid SVG structure. Now collect all background rects first,
then render them before the text element for each row.
---
 src/textual_webterm/svg_exporter.py | 42 ++++++++++++++++++++---------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/textual_webterm/svg_exporter.py b/src/textual_webterm/svg_exporter.py
index 80d9527..0d5353b 100644
--- a/src/textual_webterm/svg_exporter.py
+++ b/src/textual_webterm/svg_exporter.py
@@ -173,9 +173,38 @@ def render_terminal_svg(
             continue
 
         # Start text element for this row
-        parts.append(f'<text y="{y:.1f}">')
+        # First collect all background rects, then the text element
+        row_bg_rects: list[str] = []
 
         x = 10.0  # Starting x position with padding
+        for span in spans:
+            text = span["text"]
+            columns = span["columns"]
+
+            # Background needs a separate rect (collected before text)
+            if span["has_bg"] and span["bg"] != background:
+                bg_width = columns * char_width
+                bg_y = y - font_size + 2
+                row_bg_rects.append(
+                    f'<rect x="{x:.1f}" y="{bg_y:.1f}" '
+                    f'width="{bg_width:.1f}" height="{actual_line_height:.1f}" '
+                    f'fill="{span["bg"]}"/>'
+                )
+
+            if not text or (text.isspace() and not span["has_bg"]):
+                # Skip empty spans without background, but advance position
+                x += columns * char_width
+                continue
+
+            x += columns * char_width
+
+        # Add background rects first
+        parts.extend(row_bg_rects)
+
+        # Now add the text element
+        parts.append(f'<text y="{y:.1f}">')
+
+        x = 10.0  # Reset x position for text rendering
         for span in spans:
             text = span["text"]
             columns = span["columns"]
@@ -202,17 +231,6 @@ def render_terminal_svg(
             if classes:
                 attrs.append(f'class="{" ".join(classes)}"')
 
-            # Background needs a separate rect
-            if span["has_bg"] and span["bg"] != background:
-                bg_width = columns * char_width
-                bg_y = y - font_size + 2
-                parts.insert(
-                    -1,  # Insert before current text element
-                    f'<rect x="{x:.1f}" y="{bg_y:.1f}" '
-                    f'width="{bg_width:.1f}" height="{actual_line_height:.1f}" '
-                    f'fill="{span["bg"]}"/>',
-                )
-
             parts.append(f'<tspan {" ".join(attrs)}>{_escape_xml(text)}</tspan>')
             x += columns * char_width