reworking carousel on dashboard

web/src/lib/components/add-show-card.svelte

@@ -33,7 +33,7 @@
 	}
 </script>
 
-<Card.Root class="col-span-full h-full overflow-x-hidden sm:col-span-1">
+<Card.Root class="col-span-full flex h-full flex-col overflow-x-hidden sm:col-span-1">
 	<Card.Header>
 		<Card.Title class="flex h-12 items-center leading-tight">
 			{result.name}
@@ -45,10 +45,10 @@
 		>{result.overview !== '' ? result.overview : 'No overview available'}</Card.Description
 		>
 	</Card.Header>
-	<Card.Content class="flex h-96 w-full items-center justify-center">
+	<Card.Content class="flex flex-1 items-center justify-center">
 		{#if result.poster_path != null}
 			<img
-					class="max-h-full max-w-full rounded-lg object-contain"
+					class="h-full w-full rounded-lg object-contain"
 					src={result.poster_path}
 					alt="{result.name}'s Poster Image"
 			/>

web/src/lib/components/recommended-shows-carousel.svelte

@@ -12,21 +12,22 @@
 		align: 'start',
 		loop: true
 	}}
+        class="max-w-[80vw]"
         plugins={[
 		Autoplay({
-			delay: 4000,
+			delay: 5000,
 			stopOnInteraction: false,
 			stopOnMouseEnter: true,
-			playOnInit: true
+			playOnInit: true,
+			stopOnFocusIn: true
 		})
 	]}
 >
-    <Carousel.Content class="-ml-1">
+
+    <Carousel.Content>
         {#each shows as show}
-            <Carousel.Item class="pl-1 md:basis-1/2 lg:basis-1/3">
-                <div class="p-1">
-                    <AddShowCard result={show}/>
-                </div>
+            <Carousel.Item class="md:basis-1/2 md:max-w-[40vw] xl:max-w-[20vw]">
+                <AddShowCard result={show}/>
             </Carousel.Item>
         {/each}
     </Carousel.Content>