From ff10131b4da915461f2fe4624b4f5ab5b5288ca9 Mon Sep 17 00:00:00 2001
From: zkldi <20380519+zkldi@users.noreply.github.com>
Date: Tue, 28 May 2024 21:30:15 +0100
Subject: [PATCH] fix: this vstack stuff doesn't work idk what it did

---
 .../components/SelectableCompareType.tsx      |  2 +-
 .../tables/components/SelectableRanking.tsx   | 56 ++++++++--------
 .../tables/components/SelectableRating.tsx    | 64 ++++++++++---------
 3 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/client/src/components/tables/components/SelectableCompareType.tsx b/client/src/components/tables/components/SelectableCompareType.tsx
index b35efd977..3d719c339 100644
--- a/client/src/components/tables/components/SelectableCompareType.tsx
+++ b/client/src/components/tables/components/SelectableCompareType.tsx
@@ -18,7 +18,7 @@ export default function SelectableCompareType({
 	gptConfig: GamePTConfig;
 } & ZTableTHProps) {
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
+		<th className="gap-1 align-items-center justify-content-center">
 			<select
 				onChange={(v) => setMetric(v.target.value)}
 				value={metric}
diff --git a/client/src/components/tables/components/SelectableRanking.tsx b/client/src/components/tables/components/SelectableRanking.tsx
index 2cb8c44d7..9a14283a0 100644
--- a/client/src/components/tables/components/SelectableRanking.tsx
+++ b/client/src/components/tables/components/SelectableRanking.tsx
@@ -36,33 +36,35 @@ export default function SelectableRanking({
 	}
 
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
-			<select
-				onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
-				value={rankingViewMode}
-				className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
-			>
-				<option value="global">Global Ranking</option>
-				<option value="rival">Rival Ranking</option>
-			</select>
-			<div onClick={() => changeSort("Site Ranking")}>
-				<div className="d-flex justify-content-center gap-1">
-					<Icon
-						type="arrow-up"
-						className={
-							currentSortMode === "Rating" && reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-					<Icon
-						type="arrow-down"
-						className={
-							currentSortMode === "Rating" && !reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
+		<th>
+			<div className="vstack gap-1 align-items-center justify-content-center">
+				<select
+					onChange={(v) => setRankingViewMode(v.target.value as RankingViewMode)}
+					value={rankingViewMode}
+					className="border-0 p-0.5 text-body fw-bolder rounded focus-ring focus-ring-light bg-transparent"
+				>
+					<option value="global">Global Ranking</option>
+					<option value="rival">Rival Ranking</option>
+				</select>
+				<div onClick={() => changeSort("Site Ranking")}>
+					<div className="d-flex justify-content-center gap-1">
+						<Icon
+							type="arrow-up"
+							className={
+								currentSortMode === "Rating" && reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+						<Icon
+							type="arrow-down"
+							className={
+								currentSortMode === "Rating" && !reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+					</div>
 				</div>
 			</div>
 		</th>
diff --git a/client/src/components/tables/components/SelectableRating.tsx b/client/src/components/tables/components/SelectableRating.tsx
index 7fc36e94e..08ce90e29 100644
--- a/client/src/components/tables/components/SelectableRating.tsx
+++ b/client/src/components/tables/components/SelectableRating.tsx
@@ -36,37 +36,39 @@ export default function SelectableRating<GPT extends GPTString>({
 	}
 
 	return (
-		<th className="vstack gap-1 align-items-center justify-content-center">
-			<select
-				onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
-				value={rating}
-				className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
-			>
-				{Object.keys(gptConfig[key]).map((s) => (
-					<option key={s} value={s}>
-						{UppercaseFirst(s)}
-					</option>
-				))}
-			</select>
-			<div onClick={() => changeSort("Rating")}>
-				<span className="d-flex justify-content-center gap-1">
-					<Icon
-						type="arrow-up"
-						className={
-							currentSortMode === "Rating" && reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-					<Icon
-						type="arrow-down"
-						className={
-							currentSortMode === "Rating" && !reverseSort
-								? "opacity-100"
-								: "opacity-25"
-						}
-					/>
-				</span>
+		<th>
+			<div className="vstack gap-1 align-items-center justify-content-center">
+				<select
+					onChange={(v) => setRating(v.target.value as AllRatings<GPT>)}
+					value={rating}
+					className="border-0 text-body fw-bolder bg-transparent rounded focus-ring focus-ring-light"
+				>
+					{Object.keys(gptConfig[key]).map((s) => (
+						<option key={s} value={s}>
+							{UppercaseFirst(s)}
+						</option>
+					))}
+				</select>
+				<div onClick={() => changeSort("Rating")}>
+					<span className="d-flex justify-content-center gap-1">
+						<Icon
+							type="arrow-up"
+							className={
+								currentSortMode === "Rating" && reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+						<Icon
+							type="arrow-down"
+							className={
+								currentSortMode === "Rating" && !reverseSort
+									? "opacity-100"
+									: "opacity-25"
+							}
+						/>
+					</span>
+				</div>
 			</div>
 		</th>
 	);