From fba9cf13717d5f651c744ade3ae756a1b366f82c Mon Sep 17 00:00:00 2001
From: Contramundum <contramundum53@outlook.com>
Date: Mon, 13 Nov 2023 16:58:14 +0900
Subject: [PATCH] Fix audio artifact component

---
 .../ts/components/ArtifactCardMedia.tsx         | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/optuna_dashboard/ts/components/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
index 6326cb16e..282b74324 100644
--- a/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
+++ b/optuna_dashboard/ts/components/ArtifactCardMedia.tsx
@@ -4,7 +4,7 @@ import {
   isThreejsArtifact,
 } from "./ThreejsArtifactViewer"
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile"
-import { CardMedia } from "@mui/material"
+import { CardMedia, Box } from "@mui/material"
 
 export const ArtifactCardMedia: FC<{
   artifact: Artifact
@@ -35,9 +35,18 @@ export const ArtifactCardMedia: FC<{
     )
   } else if (artifact.mimetype.startsWith("audio")) {
     return (
-      <audio controls>
-        <source src={urlPath} type={artifact.mimetype} />
-      </audio>
+      <Box
+        style={{
+          width: "100%",
+          height: height,
+          display: "flex",
+          alignItems: "center",
+        }}
+      >
+        <audio controls style={{ width: "100%" }}>
+          <source src={urlPath} type={artifact.mimetype} />
+        </audio>
+      </Box>
     )
   } else if (artifact.mimetype.startsWith("image")) {
     return (