From 59b9cf521a20ed559c81bd6f37a7e430ec00fe2f Mon Sep 17 00:00:00 2001
From: bijx <bsamiee@hotmail.com>
Date: Tue, 30 Dec 2025 23:45:43 -0500
Subject: [PATCH] Fix: Skewed SVGs in Radial Menu (#2749)

## Description:

I believe this bug came after the introduction of the new donation
button in the radial menu (#2708) causing the rectangular SVGs to get
squished/skewed into square aspect ratios. This fix adds a little check
to fallback onto original image dimensions when an SVG's aspect ratio
isn't available. I tried a hardcoded fix earlier but if we ever decide
to add different scaled icons into the radial menu again, this will
automatically ensure the correct aspect ratio is used and the icon is
centered properly.

### Before Fix
<img width="1133" height="473" alt="image"
src="https://github.com/user-attachments/assets/5f06b19c-7072-4650-a1b7-4cb2bf1200dc"
/>

### After Fix
<img width="840" height="421" alt="image"
src="https://github.com/user-attachments/assets/176f1e7b-84bf-4b06-9ad6-4031e516d4ff"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

bijx
---
 src/client/Utils.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/client/Utils.ts b/src/client/Utils.ts
index a842a42af..7352c388f 100644
--- a/src/client/Utils.ts
+++ b/src/client/Utils.ts
@@ -296,5 +296,23 @@ export async function getSvgAspectRatio(src: string): Promise<number | null> {
     // fetch may fail due to CORS or non-SVG..
   }
 
+  const imgRatio = await new Promise<number | null>((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+        resolve(img.naturalWidth / img.naturalHeight);
+      } else {
+        resolve(null);
+      }
+    };
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+
+  if (imgRatio !== null) {
+    self.svgAspectRatioCache.set(src, imgRatio);
+    return imgRatio;
+  }
+
   return null;
 }