Merge pull request #89 from Siirko/fg/fix/info-card

fix(MusicCardInfo): close #83
aaalloc · Nov 19, 2023 · f57d1db · f57d1db
2 parents 1562911 + 5894ca0
commit f57d1db
Showing 1 changed file with 29 additions and 32 deletions.
diff --git a/src/components/contexts_menu/MusicCardInfo.tsx b/src/components/contexts_menu/MusicCardInfo.tsx
@@ -12,38 +12,35 @@ export function MusicCardInfo({ audio }: { audio: Audio }) {
       <DialogTrigger asChild>
         <p>Information</p>
       </DialogTrigger>
-      <DialogContent className="bg-white dark:bg-gray-800 p-8 rounded-lg">
-        <div className="flex items-start space-x-6">
-          <Image
-            className="rounded-lg object-cover shadow-lg"
-            src={byteToImage(audio.cover)}
-            height={200}
-            width={200}
-            alt="Album cover"
-            style={{
-              aspectRatio: "1/1",
-              objectFit: "cover",
-              overflow: "visible", // Set overflow to visible
-            }}
-          />
-          <div className="flex flex-col space-y-2">
-            <p className="text-xl font-semibold dark:text-white">{audio.title}</p>
-            <div>
-              <Label className="text-gray-500 dark:text-gray-300">Artist</Label>
-              <p className="text-gray-500 dark:text-gray-300">{audio.artist}</p>
-            </div>
-            <div>
-              <Label className="text-gray-500 dark:text-gray-300">Duration</Label>
-              <p className="text-gray-400 dark:text-gray-200">
-                {format_duration(audio.duration)}
-              </p>
-            </div>
-            <div>
-              <Label className="text-gray-500 dark:text-gray-300">Folder path</Label>
-              <p className="text-gray-400 dark:text-gray-200">
-                {audio.path.substring(0, audio.path.lastIndexOf("/"))}
-              </p>
-            </div>
+      <DialogContent className="bg-white dark:bg-gray-800 p-8 rounded-lg flex items-start gap-6 max-w-2xl">
+        <Image
+          className="rounded-lg object-cover shadow-lg aspect-square"
+          src={byteToImage(audio.cover)}
+          height={200}
+          width={200}
+          alt="Album cover"
+        />
+        <div className="flex flex-col gap-2 flex-1">
+          <p className="text-xl font-semibold dark:text-white break-all line-clamp-1">
+            {audio.title}
+          </p>
+          <div>
+            <Label className="text-gray-500 dark:text-gray-300">Artist</Label>
+            <p className="text-gray-500 dark:text-gray-300 break-all line-clamp-1">
+              {audio.artist}
+            </p>
+          </div>
+          <div>
+            <Label className="text-gray-500 dark:text-gray-300">Duration</Label>
+            <p className="text-gray-400 dark:text-gray-200">
+              {format_duration(audio.duration)}
+            </p>
+          </div>
+          <div>
+            <Label className="text-gray-500 dark:text-gray-300">Folder path</Label>
+            <p className="text-gray-400 dark:text-gray-200 break-all line-clamp-1">
+              {audio.path.replace(/[/\\][^/\\]*$/, "")}
+            </p>
           </div>
         </div>
       </DialogContent>