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
This commit is contained in:
bijx
2025-12-30 23:45:43 -05:00
committed by GitHub
parent b5a0541202
commit 59b9cf521a
+18
View File
@@ -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;
}