slightly better mobile ui for leaderboard page

osuAkatsuki · Jul 15, 2024 · f5727ac · f5727ac
1 parent 8b96004
commit f5727ac
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/GlobalUserLeaderboard.tsx b/src/components/GlobalUserLeaderboard.tsx
@@ -72,9 +72,12 @@ export const GlobalUserLeaderboard = (): JSX.Element => {
   if (loading || !leaderboardData) {
     return (
       <>
-        <Stack direction="row" justifyContent="space-between">
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          justifyContent="space-between"
+        >
+          {/* Game Modes */}
           <Stack direction="row" spacing={1}>
-            {/* Game Modes */}
             <Skeleton variant="rectangular" width={105} height={35}></Skeleton>
             <Skeleton variant="rectangular" width={70} height={35}></Skeleton>
             <Skeleton variant="rectangular" width={143} height={35}></Skeleton>

diff --git a/src/components/LeaderboardSelectionBar.tsx b/src/components/LeaderboardSelectionBar.tsx
@@ -22,7 +22,11 @@ export const LeaderboardSelectionBar = ({
 }): JSX.Element => {
   return (
     <>
-      <Stack direction="row" justifyContent="space-between" spacing={1}>
+      <Stack
+        direction={{ xs: "column", sm: "row" }}
+        justifyContent="space-between"
+        spacing={1}
+      >
         <Stack direction="row" spacing={1}>
           <Button
             variant={gameMode === GameMode.Standard ? "contained" : "outlined"}