From d93c4638cb84b76cb1818f84c48967c1d455073f Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Thu, 23 Nov 2023 21:45:14 -0800
Subject: fix(wrapped): 100% accurate width calculation

---
 src/lib/Tools/Wrapped.svelte | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)

(limited to 'src/lib/Tools/Wrapped.svelte')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 070643e8..dcad3a8d 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -43,26 +43,37 @@
 	const updateWidth = () => {
 		const wrappedContainer = document.querySelector('#wrapped') as HTMLElement;
 
+		if (!wrappedContainer) return;
+
 		wrappedContainer.style.width = `100%`;
 
 		const reset = () => {
-			let maxWidth = 0;
-
-			if (!wrappedContainer) return;
+			let widths: number[] = [];
 
 			wrappedContainer.querySelectorAll('.category').forEach((item) => {
-				let category = item as HTMLElement;
-
-				if (category.offsetWidth > maxWidth) {
-					maxWidth = category.offsetWidth;
-				}
+				const category = item as HTMLElement;
+				const style = window.getComputedStyle(category);
+
+				widths.push(
+					category.offsetWidth +
+						parseFloat(style.marginLeft) +
+						parseFloat(style.marginRight) +
+						parseFloat(style.paddingLeft) +
+						parseFloat(style.paddingRight) +
+						parseFloat(style.borderLeftWidth) +
+						parseFloat(style.borderRightWidth)
+				);
 			});
 
-			wrappedContainer.style.width = `calc(${maxWidth * 2}px + 1%)`;
-			width = wrappedContainer.offsetWidth;
+			widths.sort((a, b) => b - a);
+
+			const requiredWidth = widths[0] + (widths[1] || 0);
+
+			wrappedContainer.style.width = `${requiredWidth}px`;
+			width = requiredWidth;
 		};
 
-		for (let i = 0; i < 5; i++) reset();
+		reset();
 	};
 
 	onMount(async () => {
-- 
cgit v1.2.3