Screwed around with the layout a bit

src/lib/components/media/mediaCard.svelte

@@ -3,7 +3,6 @@
 
     import Services from '$lib/services.json'
     import IconButton from '$lib/components/utility/iconButton.svelte'
-    import { onMount } from 'svelte'
 
     const iconClasses = {
         song: 'fa-solid fa-music',
@@ -12,24 +11,12 @@
         playlist: 'fa-solid fa-forward-fast',
     }
 
-    let card,
-        cardGlare,
-        cardWidth,
-        cardHeight,
-        icon = iconClasses[mediaData.mediaType]
-
-    onMount(() => {
-        const cardRect = card.getBoundingClientRect()
-        cardWidth = cardRect.width
-        cardHeight = cardRect.height
-    })
+    let card, cardGlare
 
     const rotateCard = (event) => {
         const cardRect = card.getBoundingClientRect()
-        const cardCenterX = cardRect.left + cardWidth / 2
-        const cardCenterY = cardRect.top + cardHeight / 2
-        const x = ((event.x - cardCenterX) * 2) / cardWidth
-        const y = ((cardCenterY - event.y) * 2) / cardHeight
+        const x = (2 * (event.x - cardRect.left)) / cardRect.width - 1 // These are simplified calculations to find the x-y coords relative to the center of the card
+        const y = (2 * (cardRect.top - event.y)) / cardRect.height + 1
 
         let angle = Math.atan(x / y) // You'd think it should be y / x but it's actually the inverse
         const distanceFromCorner = Math.sqrt((x - 1) ** 2 + (y - 1) ** 2) // This is a cool little trick, the -1 on the x an y coordinate is effective the same as saying "make the origin of the glare [1, 1]"
@@ -38,11 +25,11 @@
         card.style.transform = `rotateX(${y * 10}deg) rotateY(${x * 10}deg)`
     }
 
-    // TEST IMAGES (Remember to refresh! Vite doesn't retrigger the onMount calculation) ---> https://f4.bcbits.com/img/a2436961975_10.jpg | {mediaData.image} | https://i.ytimg.com/vi/yvFgNP9iqd4/maxresdefault.jpg
+    // TEST IMAGES --> https://f4.bcbits.com/img/a2436961975_10.jpg | {mediaData.image} | https://i.ytimg.com/vi/yvFgNP9iqd4/maxresdefault.jpg
 </script>
 
 <a id="card-wrapper" on:mousedown|preventDefault on:mousemove={(event) => rotateCard(event)} on:mouseleave={() => (card.style.transform = null)} href="/details?id={mediaData.id}&service={mediaData.connectionId}">
-    <div bind:this={card} id="card" class="relative h-56 transition-all duration-200 ease-out">
+    <div bind:this={card} id="card" class="relative h-60 transition-all duration-200 ease-out">
         {#if mediaData.image}
             <img id="card-image" class="h-full max-w-none rounded-lg transition-all" src={mediaData.image} alt="{mediaData.name} thumbnail" />
         {:else}
@@ -51,7 +38,7 @@
             </div>
         {/if}
         <div bind:this={cardGlare} id="card-glare" class="absolute top-0 grid h-full w-full place-items-center rounded-lg opacity-0 transition-opacity duration-200 ease-out">
-            <span class="relative h-14">
+            <span class="relative h-12">
                 <IconButton on:click={() => console.log(`Play ${mediaData.name}`)}>
                     <i slot="icon" class="fa-solid fa-play text-xl" />
                 </IconButton>
@@ -60,10 +47,21 @@
         <div id="card-label" class="absolute -bottom-3 w-full px-2.5 text-sm">
             <div class="overflow-hidden text-ellipsis whitespace-nowrap" title={mediaData.name}>{mediaData.name}</div>
             <div class="flex w-full items-center gap-1.5 overflow-hidden text-neutral-400">
-                <span class="overflow-hidden text-ellipsis">{Array.from(mediaData.artists, (artist) => artist.name).join(', ')}</span>
+                <span id="artist-list" class="overflow-hidden text-ellipsis" style="font-size: 0;">
+                    <!-- the font size of zero is to remove the stupid little gaps between the spans -->
+                    {#each mediaData.artists as artist}
+                        {@const listIndex = mediaData.artists.indexOf(artist)}
+                        <a class="text-sm hover:underline" href="/artist?id={artist.id}&service={mediaData.connectionId}">{artist.name}</a>
+                        {#if listIndex === mediaData.artists.length - 2}
+                            <span class="mx-0.5 text-sm">&</span>
+                        {:else if listIndex < mediaData.artists.length - 2}
+                            <span class="mr-0.5 text-sm">,</span>
+                        {/if}
+                    {/each}
+                </span>
                 {#if mediaData.mediaType}
                     <span>&bull;</span>
-                    <i class="{icon} text-xs" style="color: var({Services[mediaData.serviceType].primaryColor});" />
+                    <i class="{iconClasses[mediaData.mediaType]} text-xs" style="color: var({Services[mediaData.serviceType].primaryColor});" />
                 {/if}
             </div>
         </div>