From 896393575143a29170c76d1f755d2a773d1ce854 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Fri, 22 Dec 2023 00:55:15 -0800
Subject: fix(wrapped): absolute best updateWidth()

---
 src/lib/Tools/Wrapped.svelte | 39 +++++++++++++++++++++------------------
 1 file changed, 21 insertions(+), 18 deletions(-)

(limited to 'src/lib/Tools')

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 2af993f2..dbd7cc1e 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -97,26 +97,29 @@
 		wrappedContainer.style.width = `1920px`;
 
 		const reset = () => {
-			let widths: number[] = [];
+			let topWidths = 0;
+			let middleWidths = 0;
 
 			wrappedContainer.querySelectorAll('.category').forEach((item) => {
 				const category = item as HTMLElement;
 				const style = window.getComputedStyle(category);
-
-				widths.push(
+				const width =
 					category.offsetWidth +
-						parseFloat(style.marginLeft) +
-						parseFloat(style.marginRight) +
-						parseFloat(style.paddingLeft) +
-						parseFloat(style.paddingRight) +
-						parseFloat(style.borderLeftWidth) +
-						parseFloat(style.borderRightWidth)
-				);
+					parseFloat(style.marginLeft) +
+					parseFloat(style.marginRight) +
+					parseFloat(style.paddingLeft) +
+					parseFloat(style.paddingRight) +
+					parseFloat(style.borderLeftWidth) +
+					parseFloat(style.borderRightWidth);
+
+				if (category.classList.contains('top-category')) {
+					topWidths += width;
+				} else if (category.classList.contains('middle-category')) {
+					middleWidths += width;
+				}
 			});
 
-			widths.sort((a, b) => b - a);
-
-			const requiredWidth = widths[0] + (widths[1] || 0);
+			const requiredWidth = topWidths > middleWidths ? topWidths : middleWidths;
 
 			wrappedContainer.style.width = `${requiredWidth}px`;
 			width = requiredWidth;
@@ -342,7 +345,7 @@
 			class:transparent={transparency}
 		>
 			<div class="categories-grid" style="padding-bottom: 0;">
-				<div class="grid-item image-grid avatar-grid category">
+				<div class="grid-item image-grid avatar-grid category top-category">
 					<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
 						<img src={proxy(wrapped.avatar.large)} alt="User Avatar" on:load={updateWidth} />
 					</a>
@@ -373,7 +376,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="category-grid pure-category category">
+				<div class="category-grid pure-category category top-category">
 					<div class="grid-item">
 						<b>Anime</b>
 					</div>
@@ -385,7 +388,7 @@
 					</div>
 					<div class="grid-item">Episodes: {episodes}</div>
 				</div>
-				<div class="category-grid pure-category category">
+				<div class="category-grid pure-category category top-category">
 					<div class="grid-item">
 						<b>Manga</b>
 					</div>
@@ -401,7 +404,7 @@
 				</div>
 			</div>
 			<div class="categories-grid">
-				<div class="category-grid pure-category category">
+				<div class="category-grid pure-category category middle-category">
 					<div class="grid-item image-grid">
 						{#if animeList !== undefined}
 							<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
@@ -429,7 +432,7 @@
 						{/if}
 					</div>
 				</div>
-				<div class="category-grid pure-category category">
+				<div class="category-grid pure-category category middle-category">
 					<div class="grid-item image-grid">
 						{#if mangaList !== undefined}
 							<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
-- 
cgit v1.2.3