From 782a0e6c6d7de717caa5cd48e79fe469fdb37e06 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 26 Mar 2023 20:03:32 +0300
Subject: [PATCH] Better user avatar + name wrapping for mobile

---
 app/routes/u.$identifier/index.tsx | 12 +++++++-----
 app/styles/u.css                   |  2 ++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/routes/u.$identifier/index.tsx b/app/routes/u.$identifier/index.tsx
index d05e83b0c..c0b3af4a5 100644
--- a/app/routes/u.$identifier/index.tsx
+++ b/app/routes/u.$identifier/index.tsx
@@ -33,11 +33,13 @@ export default function UserInfoPage() {
         <Avatar user={data} size="lg" className="u__avatar" />
         <div>
           <h2 className="u__name">
-            {data.discordName}
-            <span className="u__discriminator">
-              <wbr />#{data.discordDiscriminator}
-            </span>
-            {data.country ? <Flag countryCode={data.country} tiny /> : null}
+            <div>{data.discordName}</div>
+            <div>
+              <span className="u__discriminator">
+                <wbr />#{data.discordDiscriminator}
+              </span>
+              {data.country ? <Flag countryCode={data.country} tiny /> : null}
+            </div>
           </h2>
           <TeamInfo />
         </div>
diff --git a/app/styles/u.css b/app/styles/u.css
index aa6b87640..0a8e7ed20 100644
--- a/app/styles/u.css
+++ b/app/styles/u.css
@@ -12,6 +12,7 @@
 }
 
 .u__avatar {
+  min-width: 125px;
   grid-area: avatar;
 }
 
@@ -25,6 +26,7 @@
 
 .u__name {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   grid-area: name;
   overflow-wrap: anywhere;