Fix: fix rouet hopefully this time (#5)

src/App.svelte

@@ -72,17 +72,20 @@
     </div>
     <img class="w-96 -mb-48 md:w-xl md:-mr-56 md:-mt-64 md:-mb-80" src={menthealeauLogo} alt="Logo d'une menthe à l'eau" />
   </div>
-  <div class="flex flex-row md:items-center gap-2 max-w-96 w-full">
+  <div class="flex flex-row md:flex-row-reverse md:items-center gap-2 max-w-screen md:max-w-200 w-full box-border">
-    <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-96 w-full">
+    <div class="p-4 bg-[#ff99b4] rounded-md border-white border-5 drop-shadow-md flex md:flex-row-reverse flex-col gap-4 w-full">
+      <div class="flex flex-col gap-4 w-full md:w-1/2 grow">
         <h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
         <p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
+      </div>
+      <div class="flex flex-col gap-4 w-full bg-[#f97095] md:w-1/2 p-4 rounded-md">
         {#if imageData == ""}
           <div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
             <svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
           </div>
         {:else}
-        <a href={url} target="_blank">
+          <a class="w-full" href={url} target="_blank">
-          <img class="w-full rounded" src={imageData} alt="current song artwork" />
+            <img class="w-full rounded relative" src={imageData} alt="current song artwork" />
           </a>
         {/if}
         <span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
@@ -95,9 +98,9 @@
           {/each}
         </div>
         <div class="flex flex-col items-center w-full">
-        <div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20">
+          <div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20 shadow-md">
             {#if loadingSound}
-            <svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+              <svg class="mr-3 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
             {:else}
               {#if isPlaying}
                 <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
@@ -108,7 +111,8 @@
           </div>
         </div>
       </div>
-    <div class="flex flex-col bg-white rounded-md items-center justify-center h-fit mt-12 pt-4 pb-1 gap-2">
+    </div>
+    <div class="invisible md:visible flex flex-col bg-white rounded-md items-center justify-center h-fit shadow-md pt-4 pb-1 w-full max-w-8 gap-2">
       <input id="volume-slider" type="range" value="100" style="" onchange={(e) => audioPlayer.volume = parseInt(e.target.value) / 100}/>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-8 text-[#ff99b4]" viewBox="0 0 24 24"><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14v-4q0-.425.288-.712T6 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T12.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.512.013T16 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2"/></svg>
     </div>