From d3d83b31ffa1becac07ee227432addbbcd4e6e4b Mon Sep 17 00:00:00 2001
From: maxDorninger <97409287+maxDorninger@users.noreply.github.com>
Date: Mon, 9 Jun 2025 00:12:42 +0200
Subject: [PATCH] refactor layout and improve card responsiveness in Svelte
 components

---
 web/src/lib/components/add-show-card.svelte         | 4 ++--
 web/src/lib/components/season-requests-table.svelte | 2 +-
 web/src/lib/components/show-picture.svelte          | 2 +-
 web/src/routes/dashboard/tv/+page.svelte            | 3 ++-
 web/src/routes/dashboard/tv/add-show/+page.svelte   | 4 ++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/components/add-show-card.svelte b/web/src/lib/components/add-show-card.svelte
index ad4efdb..35d20c5 100644
--- a/web/src/lib/components/add-show-card.svelte
+++ b/web/src/lib/components/add-show-card.svelte
@@ -33,9 +33,9 @@
 	}
 </script>
 
-<Card.Root class="h-full max-w-sm">
+<Card.Root class="h-full overflow-x-hidden col-span-full">
 	<Card.Header>
-		<Card.Title class="flex h-12 items-center overflow-hidden leading-tight">
+		<Card.Title class="flex h-12 items-center leading-tight">
 			{result.name}
 			{#if result.year != null}
 				({result.year})
diff --git a/web/src/lib/components/season-requests-table.svelte b/web/src/lib/components/season-requests-table.svelte
index c2eda17..a118f2a 100644
--- a/web/src/lib/components/season-requests-table.svelte
+++ b/web/src/lib/components/season-requests-table.svelte
@@ -124,7 +124,7 @@
                         {request.authorized_by?.email ?? 'N/A'}
                     </Table.Cell>
                     <!-- TODO: ADD DIALOGUE TO MODIFY REQUEST -->
-                    <Table.Cell class="flex flex-col items-center gap-1">
+                    <Table.Cell class="flex flex-col max-w-[150px] gap-1">
                         {#if user().is_superuser}
                             <Button
                                     class=""
diff --git a/web/src/lib/components/show-picture.svelte b/web/src/lib/components/show-picture.svelte
index 7e2a05f..fd9d7c1 100644
--- a/web/src/lib/components/show-picture.svelte
+++ b/web/src/lib/components/show-picture.svelte
@@ -18,7 +18,7 @@
     />
     <img
             alt="{getFullyQualifiedShowName(show)}'s Poster Image"
-            class="aspect-9/16 center h-auto max-w-full rounded-lg object-cover"
+            class="aspect-9/16 center h-auto w-full rounded-lg object-cover"
             src="{apiUrl}/static/image/{show.id}.jpeg"
     />
 </picture>
\ No newline at end of file
diff --git a/web/src/routes/dashboard/tv/+page.svelte b/web/src/routes/dashboard/tv/+page.svelte
index 9a01e88..66ce611 100644
--- a/web/src/routes/dashboard/tv/+page.svelte
+++ b/web/src/routes/dashboard/tv/+page.svelte
@@ -57,7 +57,7 @@
 			{:then tvShows}
 				{#each tvShows as show}
 					<a href={'/dashboard/tv/' + show.id}>
-						<Card.Root class="h-full ">
+						<Card.Root class="col-span-full max-w-[90vw] ">
 							<Card.Header>
 								<Card.Title class="h-6 truncate">{getFullyQualifiedShowName(show)}</Card.Title>
 								<Card.Description class="truncate">{show.overview}</Card.Description>
@@ -67,6 +67,7 @@
 							</Card.Content>
 						</Card.Root>
 					</a>
+
 				{:else}
 					<div class="col-span-full text-center text-muted-foreground">
 						No TV shows added yet.
diff --git a/web/src/routes/dashboard/tv/add-show/+page.svelte b/web/src/routes/dashboard/tv/add-show/+page.svelte
index 081cfad..20fc2d5 100644
--- a/web/src/routes/dashboard/tv/add-show/+page.svelte
+++ b/web/src/routes/dashboard/tv/add-show/+page.svelte
@@ -80,7 +80,7 @@
 	</div>
 </header>
 
-<div class="flex w-full flex-1 flex-col items-center gap-4 p-4 pt-0">
+<div class="flex w-full flex-1 max-w-[90vw] flex-col items-center gap-4 p-4 pt-0">
 	<div class="grid w-full max-w-sm items-center gap-12">
 		<h1 class="scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
 			Add a show
@@ -128,7 +128,7 @@
 			<h3 class="mx-auto">No Shows found.</h3>
 		{:else}
 			<div
-					class="grid w-full max-w-full auto-rows-min gap-4 sm:grid-cols-1
+					class="grid w-full auto-rows-min gap-4 sm:grid-cols-1
              md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5"
 			>
 				{#each results as result}