StillImage: make it play nice with Tailwind, remove still-image.scss

app/soapbox/components/media-gallery.tsx

@@ -160,16 +160,21 @@ const Item: React.FC<IItem> = ({
       </div>
     );
   } else if (attachment.type === 'image') {
-    const letterboxed = shouldLetterbox(attachment);
+    const letterboxed = total === 1 && shouldLetterbox(attachment);
 
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail', { letterboxed })}
+        className={classNames('media-gallery__item-thumbnail')}
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
       >
-        <StillImage src={attachment.url} alt={attachment.description} />
+        <StillImage
+          className='w-full h-full'
+          src={attachment.url}
+          alt={attachment.description}
+          letterboxed={letterboxed}
+        />
       </a>
     );
   } else if (attachment.type === 'gifv') {

app/soapbox/components/still-image.tsx

@@ -12,10 +12,12 @@ interface IStillImage {
   src: string,
   /** Extra CSS styles on the outer <div> element. */
   style?: React.CSSProperties,
+  /** Whether to display the image contained vs filled in its container. */
+  letterboxed?: boolean,
 }
 
 /** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */
-const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
+const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterboxed = false }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
 
@@ -34,10 +36,38 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style }) => {
     }
   };
 
+  /** ClassNames shared between the `<img>` and `<canvas>` elements. */
+  const baseClassName = classNames('w-full h-full block', {
+    'object-contain': letterboxed,
+    'object-cover': !letterboxed,
+  });
+
   return (
-    <div data-testid='still-image-container' className={classNames(className, 'still-image', { 'still-image--play-on-hover': hoverToPlay })} style={style}>
+    <div
-      <img src={src} alt={alt} ref={img} onLoad={handleImageLoad} />
+      data-testid='still-image-container'
-      {hoverToPlay && <canvas ref={canvas} />}
+      className={classNames(className, 'group overflow-hidden')}
+      style={style}
+    >
+      <div className='relative w-full h-full'>
+        <img
+          src={src}
+          alt={alt}
+          ref={img}
+          onLoad={handleImageLoad}
+          className={classNames(baseClassName, {
+            'absolute invisible group-hover:visible': hoverToPlay,
+          })}
+        />
+
+        {hoverToPlay && (
+          <canvas
+            ref={canvas}
+            className={classNames(baseClassName, {
+              'group-hover:invisible': hoverToPlay,
+            })}
+          />
+        )}
+      </div>
     </div>
   );
 };

app/soapbox/features/account-gallery/components/media-item.tsx

@@ -74,6 +74,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
+        className='w-full h-full rounded-lg overflow-hidden'
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {

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

@@ -577,7 +577,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
+                className='relative h-24 w-24 rounded-full ring-4 ring-white dark:ring-primary-900'
               />
             </a>
           </div>