From 85b8315298048c37e19c9507c00903ef49f0ba23 Mon Sep 17 00:00:00 2001
From: sk1982 <sk1982@noreply.gitea.tendokyu.moe>
Date: Tue, 12 Mar 2024 23:42:44 -0400
Subject: [PATCH] chuni: fix rating button wrapping

---
 src/components/chuni/top-rating-sidebar.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/chuni/top-rating-sidebar.tsx b/src/components/chuni/top-rating-sidebar.tsx
index 41d67b5..13d286d 100644
--- a/src/components/chuni/top-rating-sidebar.tsx
+++ b/src/components/chuni/top-rating-sidebar.tsx
@@ -48,19 +48,21 @@ export const ChuniTopRatingSidebar = ({ rating }: { rating: Awaited<ReturnType<t
 					{(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)}
 				</ChuniRating>
 			</div>
-			<div className="flex items-center justify-center overflow-hidden h-32 md:hidden">
-				{shownRating && <div className="flex items-baseline mb-2">
+			<div className="flex items-center max-w-full md:hidden flex-wrap">
+				{shownRating && <div className="flex items-baseline mb-2 mr-auto">
 						Average:&nbsp;
 					<ChuniRating className="text-xl" rating={+(shownRating === 'top' ? topAvg : recentAvg).mul(100)}>
 						{(shownRating === 'top' ? topAvg : recentAvg).toFixed(2)}
 					</ChuniRating>
 				</div>}
-				<span className="text-lg mr-6 font-semibold pb-2 ml-auto">Ratings</span>
-				<ButtonGroup size="md" className="mb-2 h-full">
-					<Button color={shownRating === 'top' ? 'primary' : 'default'} onClick={() => setShownRating('top')}>Top</Button>
-					<Button color={shownRating === 'recent' ? 'primary' : 'default'} onClick={() => setShownRating('recent')}>Recent</Button>
-					<Button color={shownRating === null ? 'primary' : 'default'} onClick={() => setShownRating(null)}>Hide</Button>
-				</ButtonGroup>
+				<div className="ml-auto flex items-center justify-center flex-wrap">
+					<span className="text-lg mr-6 font-semibold pb-2">Ratings</span>
+					<ButtonGroup size="md" className="mb-2 h-full">
+						<Button color={shownRating === 'top' ? 'primary' : 'default'} onClick={() => setShownRating('top')}>Top</Button>
+						<Button color={shownRating === 'recent' ? 'primary' : 'default'} onClick={() => setShownRating('recent')}>Recent</Button>
+						<Button color={shownRating === null ? 'primary' : 'default'} onClick={() => setShownRating(null)}>Hide</Button>
+					</ButtonGroup>
+				</div>
 			</div>
 			{shownRating && <ChuniTopRating rating={shownRating === 'top' ? rating.top : rating.recent.slice(0, 10)} />}
 		</div>