Fix aspect ratio of avatars in audio player

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1345

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.
 - Posts: fix audio player progress bar visibility.
+- Posts: fix audio player avatar aspect ratio for non-square avatars.
 - Posts: added missing gap in pending status.
 - Compatibility: fixed quote posting compatibility with custom Pleroma forks.
 - Profile: fix "load more" button height on account gallery page.

app/soapbox/features/audio/index.tsx

@@ -465,10 +465,9 @@ const Audio: React.FC<IAudio> = (props) => {
       <canvas
         role='button'
         tabIndex={0}
-        className='audio-player__canvas'
+        className='audio-player__canvas absolute left-0 top-0 w-full'
         width={width}
         height={height}
-        style={{ width: '100%', position: 'absolute', top: 0, left: 0 }}
         ref={canvas}
         onClick={togglePlay}
         onKeyDown={handleAudioKeyDown}
@@ -480,15 +479,12 @@ const Audio: React.FC<IAudio> = (props) => {
         <img
           src={poster}
           alt=''
+          className='pointer-events-none absolute aspect-1 -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
           width={(_getRadius() - TICK_SIZE) * 2}
           height={(_getRadius() - TICK_SIZE) * 2}
           style={{
-            position: 'absolute',
             left: _getCX(),
             top: _getCY(),
-            transform: 'translate(-50%, -50%)',
-            borderRadius: '50%',
-            pointerEvents: 'none',
           }}
         />
       )}