From 05a5d941afe91abb8d7751efc9abae27afca71db Mon Sep 17 00:00:00 2001
From: Franck G <gutmann.franck@outlook.fr>
Date: Sun, 19 Nov 2023 23:24:48 +0100
Subject: [PATCH 1/2] fix(MusicCardInfo): close #83

---
 .../contexts_menu/MusicCardInfo.tsx           | 61 +++++++++----------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/components/contexts_menu/MusicCardInfo.tsx b/src/components/contexts_menu/MusicCardInfo.tsx
index f063a9a..049d56c 100644
--- 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.substring(0, audio.path.lastIndexOf("\\"))}
+            </p>
           </div>
         </div>
       </DialogContent>

From 5894ca003aabd5110e996c9b61bd88499f3751e9 Mon Sep 17 00:00:00 2001
From: Siirko <alexander.yanovskyy@gmail.com>
Date: Sun, 19 Nov 2023 23:32:16 +0100
Subject: [PATCH 2/2] fix path for linux and windows

---
 src/components/contexts_menu/MusicCardInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/contexts_menu/MusicCardInfo.tsx b/src/components/contexts_menu/MusicCardInfo.tsx
index 049d56c..ca571fa 100644
--- a/src/components/contexts_menu/MusicCardInfo.tsx
+++ b/src/components/contexts_menu/MusicCardInfo.tsx
@@ -39,7 +39,7 @@ export function MusicCardInfo({ audio }: { audio: Audio }) {
           <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.substring(0, audio.path.lastIndexOf("\\"))}
+              {audio.path.replace(/[/\\][^/\\]*$/, "")}
             </p>
           </div>
         </div>