From 31606a191c002a75462d0b023f9fb1f248169712 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Fri, 19 Aug 2022 15:22:27 -0500
Subject: [PATCH] Better layout

---
 web/components/user-page.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index dff98029..80cc496e 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -131,9 +131,14 @@ export function UserPage(props: { user: User }) {
 
       {/* Profile details: name, username, bio, and link to twitter/discord */}
       <Col className="mx-4 -mt-6">
-        <Row className={'justify-between'}>
+        <Row className={'flex-wrap justify-between'}>
           <Col>
-            <span className="text-2xl font-bold">{user.name}</span>
+            <span
+              className="text-2xl font-bold"
+              style={{ wordBreak: 'break-word' }}
+            >
+              {user.name}
+            </span>
             <span className="text-gray-500">@{user.username}</span>
           </Col>
           <Col className={'justify-center'}>
@@ -157,7 +162,9 @@ export function UserPage(props: { user: User }) {
                 <span>streak</span>
               </Col>
               <Col
-                className={'cursor-pointer items-center text-gray-500'}
+                className={
+                  'flex-shrink-0 cursor-pointer items-center text-gray-500'
+                }
                 onClick={() => setShowLoansModal(true)}
               >
                 <span className="text-green-600">🏦 {formatMoney(153)}</span>