From 867912aa1b3f28f34cf01dcdfd04367ba1cf87ff Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 24 Mar 2022 14:07:08 -0400
Subject: [PATCH] Wrap profile fields

---
 .../ui/components/profile_info_panel.js        | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index 41fef805e..1f57ed483 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -186,7 +186,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             <Text size='sm' dangerouslySetInnerHTML={content} />
           }
 
-          <div className='flex flex-col md:flex-row items-start md:items-center space-x-0 md:space-x-2'>
+          <div className='flex flex-col md:flex-row items-start md:flex-wrap md:items-center gap-2'>
             {isLocal(account) ? (
               <HStack alignItems='center' space={0.5}>
                 <Icon
@@ -224,13 +224,15 @@ class ProfileInfoPanel extends ImmutablePureComponent {
                   className='w-4 h-4 text-gray-800'
                 />
 
-                <Text size='sm'>
-                  {isSafeUrl(account.get('website')) ? (
-                    <a className='text-primary-600 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
-                  ) : (
-                    account.get('website')
-                  )}
-                </Text>
+                <div className='max-w-[300px]'>
+                  <Text size='sm' truncate>
+                    {isSafeUrl(account.get('website')) ? (
+                      <a className='text-primary-600 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
+                    ) : (
+                      account.get('website')
+                    )}
+                  </Text>
+                </div>
               </HStack>
             ) : null}