ProfilePreview: fix display of header image, code cleanup

app/soapbox/components/ui/avatar/avatar.tsx

@@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={classNames('rounded-full overflow-hidden', className)}
+      className={classNames('rounded-full', className)}
       style={style}
       src={src}
       alt='Avatar'

app/soapbox/features/edit-profile/components/profile-preview.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
-import { HStack, Stack, Text } from 'soapbox/components/ui';
+import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
@@ -17,25 +17,28 @@ const ProfilePreview: React.FC<IProfilePreview> = ({ account }) => {
 
   return (
     <div className='bg-white dark:bg-gray-800 rounded-lg text-black dark:text-white sm:shadow dark:sm:shadow-inset overflow-hidden'>
-      <div>
-        <div className='relative w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
-          <StillImage alt='' src={account.header} className='absolute inset-0 object-cover md:rounded-t-lg' />
-        </div>
+      <div className='relative overflow-hidden isolate w-full h-32 md:rounded-t-lg bg-gray-200 dark:bg-gray-900/50'>
+        <StillImage src={account.header} />
       </div>
 
       <HStack space={3} alignItems='center' className='p-3'>
         <div className='relative'>
-          <div className='h-12 w-12 bg-gray-400 rounded-full'>
-            <StillImage alt='' className='h-12 w-12 rounded-full' src={account.avatar} />
-          </div>
+          <Avatar className='bg-gray-400' src={account.avatar} />
 
-          {account.verified && <div className='absolute -top-1.5 -right-1.5'><VerificationBadge /></div>}
+          {account.verified && (
+            <div className='absolute -top-1.5 -right-1.5'>
+              <VerificationBadge />
+            </div>
+          )}
         </div>
 
         <Stack className='truncate'>
-          <Text weight='medium' size='sm' truncate>
-            {account.display_name}
-          </Text>
+          <Text
+            weight='medium'
+            size='sm'
+            truncate
+            dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+          />
           <Text theme='muted' size='sm'>@{displayFqn ? account.fqn : account.acct}</Text>
         </Stack>
       </HStack>