Updated dynamic layout for mobile

src/app/(stats)/player/[ign]/_components/Sidebar.tsx

@@ -218,7 +218,7 @@ export default function Sidebar({ level, ign, player, guild, rank, specialRank,
     }
 
     return (
-        <Card className="w-1/4">
+        <Card className="w-full md:w-1/4">
             <CardContent>
                 <General />
                 <Separator className="my-4" />

src/app/(stats)/player/[ign]/_components/SocialIcons.tsx

@@ -15,7 +15,7 @@ export default function SocialIcons(
     }
 ) {
     return (
-        <>
+        <div className="flex flex-wrap">
             <DiscordIcon username={discord} />
             <SocialIcon href={twitch}>
                 <FaTwitch />
@@ -29,7 +29,7 @@ export default function SocialIcons(
             <SocialIcon href={hypixel}>
                 <CgWebsite />
             </SocialIcon>
-        </>
+        </div>
     )
 }
 

src/app/(stats)/player/[ign]/page.tsx

@@ -98,7 +98,7 @@ async function SuspendedPage({ params }: Pick<PageProps<"/player/[ign]">, "param
             <h1>
                 {player.uuid}
             </h1>
-            <div className="flex gap-6 px-6 mt-8 w-full max-w-7xl">
+            <div className="flex flex-col gap-6 px-6 pb-4 mt-8 w-full max-w-7xl md:flex-row">
                 <Sidebar
                     level={level}
                     ign={pign}
@@ -110,7 +110,7 @@ async function SuspendedPage({ params }: Pick<PageProps<"/player/[ign]">, "param
                 />
                 {player.stats !== undefined ?
                     (
-                        <div className="pb-4 w-3/4">
+                        <div className="w-full md:w-3/4">
                             <Accordion type="multiple" className="space-y-4">
                                 <BedwarsStats stats={player.stats.Bedwars} />
                                 <SkyWarsStats

src/components/player/displayname.tsx

@@ -37,7 +37,7 @@ export default function DisplayName(
                     className="shadow-2xl"
                 />
             </Link>
-            <h1 className="text-3xl font-bold text-stroke text-stroke-foreground dark:text-stroke-transparent">
+            <h1 className="text-xl font-bold md:text-3xl text-stroke text-stroke-foreground dark:text-stroke-transparent">
                 <PlayerRank rank={rank} monthly={monthly} plusColor={plusColor} rankColor={rankColor} specialRank={specialRank} prefix={prefix} />
                 {" "}
                 <PlayerIGN ign={ign} rank={rank} monthly={monthly} rankColor={rankColor} specialRank={specialRank} prefix={prefix} />{" "}