Merge branch 'wrap-profile-fields' into 'next'

Wrap profile fields to prevent single-row overflow

See merge request soapbox-pub/soapbox-fe!1144

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'>
+                <div className='max-w-[300px]'>
-                  {isSafeUrl(account.get('website')) ? (
+                  <Text size='sm' truncate>
-                    <a className='text-primary-600 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
+                    {isSafeUrl(account.get('website')) ? (
-                  ) : (
+                      <a className='text-primary-600 hover:underline' href={account.get('website')} target='_blank'>{account.get('website')}</a>
-                    account.get('website')
+                    ) : (
-                  )}
+                      account.get('website')
-                </Text>
+                    )}
+                  </Text>
+                </div>
               </HStack>
             ) : null}