Merge pull request optuna#915 from c-bata/fix-card-media-style

Fix the style of artifact card media
keisuke-umezawa · Jul 31, 2024 · 29a6895 · 29a6895
2 parents 75c727f + 1e288ec
commit 29a6895
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx b/optuna_dashboard/ts/components/Artifact/ArtifactCardMedia.tsx
@@ -67,5 +67,5 @@ export const ArtifactCardMedia: FC<{
       />
     )
   }
-  return <InsertDriveFileIcon sx={{ fontSize: 80 }} />
+  return <InsertDriveFileIcon sx={{ fontSize: 80, flexGrow: 1 }} />
 }
diff --git a/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx b/optuna_dashboard/ts/components/Artifact/TrialArtifactCards.tsx
@@ -66,6 +66,9 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                 marginBottom: theme.spacing(2),
                 width: width,
                 margin: theme.spacing(0, 1, 1, 0),
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
               }}
             >
               <ArtifactCardMedia
@@ -84,7 +87,7 @@ export const TrialArtifactCards: FC<{ trial: Trial }> = ({ trial }) => {
                   sx={{
                     p: theme.spacing(0.5, 0),
                     flexGrow: 1,
-                    wordWrap: "break-word",
+                    wordBreak: "break-all",
                     maxWidth: `calc(100% - ${theme.spacing(
                       4 +
                         (isThreejsArtifact(artifact) ? 4 : 0) +
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,5 +67,5 @@ export const ArtifactCardMedia: FC<{ @@
           />
         )
       }
-      return <InsertDriveFileIcon sx={{ fontSize: 80 }} />
+      return <InsertDriveFileIcon sx={{ fontSize: 80, flexGrow: 1 }} />
     }