Simplify StillImage component, fix header images

app/soapbox/components/still-image.tsx

@@ -47,35 +47,33 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
   return (
     <div
       data-testid='still-image-container'
-      className={classNames(className, 'group overflow-hidden isolate')}
+      className={classNames(className, 'relative group overflow-hidden isolate')}
       style={style}
     >
-      <div className='relative w-full h-full'>
+      <img
-        <img
+        src={src}
-          src={src}
+        alt={alt}
-          alt={alt}
+        ref={img}
-          ref={img}
+        onLoad={handleImageLoad}
-          onLoad={handleImageLoad}
+        className={classNames(baseClassName, {
+          'invisible group-hover:visible': hoverToPlay,
+        })}
+      />
+
+      {hoverToPlay && (
+        <canvas
+          ref={canvas}
           className={classNames(baseClassName, {
-            'absolute invisible group-hover:visible': hoverToPlay,
+            'group-hover:invisible': hoverToPlay,
           })}
         />
+      )}
 
-        {hoverToPlay && (
+      {(hoverToPlay && showExt) && (
-          <canvas
+        <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
-            ref={canvas}
+          <ExtensionBadge ext='GIF' />
-            className={classNames(baseClassName, {
+        </div>
-              'group-hover:invisible': hoverToPlay,
+      )}
-            })}
-          />
-        )}
-
-        {(hoverToPlay && showExt) && (
-          <div className='group-hover:hidden absolute opacity-90 left-2 bottom-2 pointer-events-none'>
-            <ExtensionBadge ext='GIF' />
-          </div>
-        )}
-      </div>
     </div>
   );
 };

app/soapbox/components/ui/card/card.tsx

@@ -33,7 +33,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
     ref={ref}
     {...filteredProps}
     className={classNames({
-      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
+      'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden isolate': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
   >

app/soapbox/features/account/components/header.tsx

@@ -551,13 +551,12 @@ const Header: React.FC<IHeader> = ({ account }) => {
       )}
 
       <div>
-        <div className='relative h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50'>
+        <div className='relative flex flex-col justify-center h-32 w-full lg:h-48 md:rounded-t-xl bg-gray-200 dark:bg-gray-900/50 overflow-hidden isolate'>
           {account.header && (
             <a href={account.header} onClick={handleHeaderClick} target='_blank'>
               <StillImage
                 src={account.header}
                 alt='Profile Header'
-                className='absolute inset-0 object-cover md:rounded-t-xl'
               />
             </a>
           )}

app/soapbox/features/ui/components/user-panel.tsx

@@ -36,13 +36,9 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
     <div className='relative'>
       <Stack space={2}>
         <Stack>
-          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
+          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative overflow-hidden'>
             {header && (
-              <StillImage
+              <StillImage src={account.header} />
-                src={account.get('header')}
-                className='absolute inset-0 object-cover'
-                alt=''
-              />
             )}
           </div>