fix: artwork flying with user on scroll

Author: chhoumann

src/ui/settings/PodcastResultCard.svelte

@@ -1,92 +1,108 @@
 <script lang="ts">
-    import { PodcastFeed } from "src/types/PodcastFeed";
-    import { createEventDispatcher } from "svelte";
-    import Button from "../obsidian/Button.svelte";
-    import { fade, fly } from 'svelte/transition';
+	import type { PodcastFeed } from "src/types/PodcastFeed";
+	import { createEventDispatcher } from "svelte";
+	import Button from "../obsidian/Button.svelte";
+	import { fade } from "svelte/transition";
 
-    export let podcast: PodcastFeed;
-    export let isSaved: boolean = false;
+	export let podcast: PodcastFeed;
+	export let isSaved = false;
 
-    const dispatch = createEventDispatcher();
-
-    function onAddPodcast() {
-        dispatch("addPodcast", { podcast });
-    }
-
-    function onRemovePodcast() {
-        dispatch("removePodcast", { podcast });
-    }
+	const dispatch = createEventDispatcher();
 </script>
 
 <div class="podcast-result-card" transition:fade={{ duration: 300 }}>
-    <img
-        src={podcast.artworkUrl}
-        alt={`Artwork for ${podcast.title}`}
-        class="podcast-artwork"
-    />
-    <div class="podcast-info">
-        <h3 class="podcast-title">{podcast.title}</h3>
-    </div>
-    <div class="podcast-actions">
-        {#if isSaved}
-            <Button
-                icon="trash"
-                ariaLabel={`Remove ${podcast.title} podcast`}
-                on:click={onRemovePodcast}
-            />
-        {:else}
-            <Button
-                icon="plus"
-                ariaLabel={`Add ${podcast.title} podcast`}
-                on:click={onAddPodcast}
-            />
-        {/if}
-    </div>
+	<div class="podcast-artwork-container">
+		<img
+			src={podcast.artworkUrl}
+			alt={`Artwork for ${podcast.title}`}
+			class="podcast-artwork"
+		/>
+	</div>
+	<div class="podcast-info">
+		<h3 class="podcast-title">{podcast.title}</h3>
+	</div>
+	<div class="podcast-actions">
+		{#if isSaved}
+			<Button
+				icon="trash"
+				aria-label={`Remove ${podcast.title} podcast`}
+				on:click={() => dispatch("removePodcast", { podcast })}
+			/>
+		{:else}
+			<Button
+				icon="plus"
+				aria-label={`Add ${podcast.title} podcast`}
+				on:click={() => dispatch("addPodcast", { podcast })}
+			/>
+		{/if}
+	</div>
 </div>
 
 <style>
-    .podcast-result-card {
-        display: flex;
-        align-items: center;
-        padding: 16px;
-        border: 1px solid var(--background-modifier-border);
-        border-radius: 8px;
-        background-color: var(--background-secondary);
-        max-width: 100%;
-        transition: all 0.3s ease;
-    }
+	.podcast-result-card {
+		display: flex;
+		align-items: center;
+		padding: 16px;
+		border: 1px solid var(--background-modifier-border);
+		border-radius: 8px;
+		background-color: var(--background-secondary);
+		max-width: 100%;
+		transition: all 0.3s ease;
+		position: relative;
+	}
+
+	.podcast-artwork-container {
+		width: 70px;
+		height: 70px;
+		flex-shrink: 0;
+		margin-right: 20px;
+		overflow: hidden;
+		border-radius: 4px;
+		position: relative;
+	}
+
+	.podcast-artwork {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.podcast-result-card:hover {
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		transform: translateY(-2px);
+	}
 
-    .podcast-result-card:hover {
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transform: translateY(-2px);
-    }
+	.podcast-info {
+		flex-grow: 1;
+		min-width: 0;
+		padding-right: 12px;
+	}
 
-    .podcast-artwork {
-        width: 70px;
-        height: 70px;
-        object-fit: cover;
-        border-radius: 4px;
-        margin-right: 20px;
-        flex-shrink: 0;
-    }
+	.podcast-title {
+		margin: 0 0 6px 0;
+		font-size: 16px;
+		font-weight: bold;
+		line-height: 1.3;
+		word-break: break-word;
+	}
 
-    .podcast-info {
-        flex-grow: 1;
-        min-width: 0;
-        padding-right: 12px;
-    }
+	.podcast-actions {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
 
-    .podcast-title {
-        margin: 0 0 6px 12px;
-        font-size: 16px;
-        font-weight: bold;
-        line-height: 1.3;
-        word-break: break-word;
-    }
+	:global(.podcast-actions button) {
+		padding: 4px;
+		width: 24px;
+		height: 24px;
+	}
 
-    .podcast-actions {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-    }
-</style>
+	:global(.podcast-actions button svg) {
+		width: 16px;
+		height: 16px;
+	}
+</style>