Better user avatar + name wrapping for mobile

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>

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;