From fd59ea54b84c3c41fa84698770856739780317fa Mon Sep 17 00:00:00 2001
From: mbaharip <62494292+mbahArip@users.noreply.github.com>
Date: Sat, 6 Apr 2024 22:24:48 +0700
Subject: [PATCH] Wrap `AudioPlayer` inside a div

---
 src/app/@preview.audio.tsx | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/app/@preview.audio.tsx b/src/app/@preview.audio.tsx
index 5fdc2f3..eaf7e51 100644
--- a/src/app/@preview.audio.tsx
+++ b/src/app/@preview.audio.tsx
@@ -65,20 +65,24 @@ export default function PreviewAudio({ file }: Props) {
           <span className='text-center text-destructive'>{error}</span>
         </div>
       ) : (
-        <AudioPlayer
-          autoPlay={false}
-          layout='stacked-reverse'
-          src={audioSrc}
-          showJumpControls={false}
-          showFilledVolume
-          style={{
-            borderRadius: "var(--radius)",
-          }}
-          onError={(e) => {
-            console.error(e);
-            setError("Could not preview this audio, try downloading the file");
-          }}
-        />
+        <div className='w-full'>
+          <AudioPlayer
+            autoPlay={false}
+            layout='stacked-reverse'
+            src={audioSrc}
+            showJumpControls={false}
+            showFilledVolume
+            style={{
+              borderRadius: "var(--radius)",
+            }}
+            onError={(e) => {
+              console.error(e);
+              setError(
+                "Could not preview this audio, try downloading the file",
+              );
+            }}
+          />
+        </div>
       )}
     </div>
   );