From c6c371507778ced5f2405965b3ad2cb50f6bb02b Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Wed, 17 Jun 2026 23:55:54 +0200
Subject: [PATCH] fix: parse comma-separated SVG viewBox values

The viewBox regex only accepted whitespace between values, so a valid
viewBox like "0,0,24,24" failed to parse and an opaque background went
undetected, tinting the icon into a solid block. Accept commas and
whitespace as separators. Add a test for the comma-separated case.
---
 client/src/utils/__tests__/svg.test.ts | 6 ++++++
 client/src/utils/svg.ts                | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/src/utils/__tests__/svg.test.ts b/client/src/utils/__tests__/svg.test.ts
index 9b21fd1bdd..2d7c01f8ba 100644
--- a/client/src/utils/__tests__/svg.test.ts
+++ b/client/src/utils/__tests__/svg.test.ts
@@ -136,6 +136,12 @@ describe('isMonochromeSvg', () => {
         '<svg width="24" height="24" stroke-width="2"><rect width="24" height="24" fill="#eee" /><path fill="#222" /></svg>';
       expect(isMonochromeSvg(svg)).toBe(false);
     });
+
+    it('rejects a background rect when the viewBox is comma-separated', () => {
+      const svg =
+        '<svg viewBox="0,0,24,24"><rect width="24" height="24" fill="#fff" /><path fill="#000" /></svg>';
+      expect(isMonochromeSvg(svg)).toBe(false);
+    });
   });
 });
 
diff --git a/client/src/utils/svg.ts b/client/src/utils/svg.ts
index 01aad53a9e..9989af6f5e 100644
--- a/client/src/utils/svg.ts
+++ b/client/src/utils/svg.ts
@@ -103,7 +103,7 @@ function extractColors(svg: string): string[] {
   return colors;
 }
 
-const VIEWBOX_REGEX = /viewBox\s*=\s*["']\s*[-\d.]+\s+[-\d.]+\s+([\d.]+)\s+([\d.]+)/i;
+const VIEWBOX_REGEX = /viewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)/i;
 const SVG_TAG_REGEX = /<svg\b[^>]*>/i;
 const RECT_REGEX = /<rect\b[^>]*>/gi;