fix layout

member-counter · Jan 13, 2025 · cd9b338 · cd9b338
1 parent a3b8427
commit cd9b338
Showing 1 changed file with 37 additions and 34 deletions.
diff --git a/apps/website/src/app/account/page.tsx b/apps/website/src/app/account/page.tsx
@@ -32,47 +32,50 @@ export default function Page() {
 
   return (
     <>
-      <div className="my-8 flex flex-col gap-8">
-        <div className="my-8 flex w-full flex-col gap-8 p-4 sm:max-w-[600px] [&>*]:w-full">
-          {discordUser.isSuccess ? (
-            <img
-              src={discordUser.data.avatar}
-              alt={t("pages.account.page.avatarAlt", {
-                username: discordUser.data.username,
-              })}
-              className="background-forground h-[128px] w-[128px] rounded-full text-transparent"
-            />
-          ) : (
-            <Skeleton className="h-[128px] w-[128px] rounded-full" />
-          )}
-          <div className="i flex flex-col justify-center gap-3">
+      <div className="flex justify-center">
+        <div className="flex w-full flex-col gap-4 p-4 sm:max-w-[600px]">
+          <div className="my-8 flex gap-8 self-center">
             {discordUser.isSuccess ? (
-              <p>
-                <span className="text-3xl text-foreground">
-                  {discordUser.data.username}
-                </span>{" "}
-                {discordUser.data.discriminator !== "0" && (
-                  <span className="text-1xl text-muted-foreground">
-                    #{discordUser.data.discriminator}
-                  </span>
-                )}
-              </p>
+              <img
+                src={discordUser.data.avatar}
+                alt={t("pages.account.page.avatarAlt", {
+                  username: discordUser.data.username,
+                })}
+                className="background-forground h-[128px] w-[128px] rounded-full text-transparent"
+              />
             ) : (
-              <Skeleton className="w-50 h-9" />
+              <Skeleton className="h-[128px] w-[128px] rounded-full" />
             )}
-            {user.isSuccess && <DisplayUserBadges badges={user.data.badges} />}
-            <div className="flex flex-row flex-wrap gap-2">
-              <DeleteButton />
-              <Link href={Routes.LogOut} className="grow">
-                <Button className="w-full" size={"sm"} icon={LogOutIcon}>
-                  {t("pages.account.page.logoutButton")}
-                </Button>
-              </Link>
+            <div className="i flex flex-col justify-center gap-3">
+              {discordUser.isSuccess ? (
+                <p>
+                  <span className="break-all text-3xl text-foreground">
+                    {discordUser.data.username}
+                  </span>{" "}
+                  {discordUser.data.discriminator !== "0" && (
+                    <span className="text-1xl text-muted-foreground">
+                      #{discordUser.data.discriminator}
+                    </span>
+                  )}
+                </p>
+              ) : (
+                <Skeleton className="w-50 h-9" />
+              )}
+              {user.isSuccess && (
+                <DisplayUserBadges badges={user.data.badges} />
+              )}
+              <div className="flex flex-row flex-wrap gap-2">
+                <DeleteButton />
+                <Link href={Routes.LogOut} className="grow">
+                  <Button className="w-full" size={"sm"} icon={LogOutIcon}>
+                    {t("pages.account.page.logoutButton")}
+                  </Button>
+                </Link>
+              </div>
             </div>
           </div>
         </div>
       </div>
-
       <Footer />
     </>
   );