From 1dafd8c9dd66a6a97573cb4b2008a39b7c986d47 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 4 Jun 2025 17:34:13 +0200
Subject: [PATCH] fix: Fix broken audio player layout in Safari, #34930
 (#34933)

---
 .../styles/mastodon/components.scss           | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 9856284197..de0478c543 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -7068,18 +7068,19 @@ a.status-card {
 }
 
 .audio-player {
-  overflow: hidden;
   box-sizing: border-box;
+  container: audio-player / inline-size;
   position: relative;
-  background: var(--player-background-color, var(--background-color));
-  color: var(--player-foreground-color);
-  border-radius: 8px;
-  padding-bottom: 44px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   width: 100%;
+  aspect-ratio: 16 / 9;
+  color: var(--player-foreground-color);
+  background: var(--player-background-color, var(--background-color));
+  border-radius: 8px;
   outline: 1px solid var(--media-outline-color);
   outline-offset: -1px;
-  aspect-ratio: 16 / 9;
-  container: audio-player / inline-size;
 
   &__controls {
     display: grid;
@@ -7128,9 +7129,17 @@ a.status-card {
   }
 
   &__visualizer {
+    width: 100%;
     max-width: 200px;
   }
 
+  .video-player__seek {
+    position: absolute;
+    inset: 0 0 auto;
+    height: 24px;
+    z-index: 1; /* Ensure this renders on top of audio player controls */
+  }
+
   &.inactive {
     .video-player__seek,
     .audio-player__controls,