Attempt to fix mobile styling

src/lib/components/Catalog.svelte

@@ -12,31 +12,21 @@
 
 {#if $catalog}
 	{#if $catalog.length > 0}
+		<div class="flex flex-col gap-5">
+			<div class="sm:block flex-col flex">
 				<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
-		<div class="container">
+			</div>
+			<div class="flex flex-row gap-5 flex-wrap">
 				{#each $catalog as { id, manga } (id)}
 					<CatalogItem {manga} />
 				{/each}
 			</div>
+		</div>
 	{:else}
-		<div class="empty-state">
+		<div class="text-center p-20">
 			<p>Your catalog is currently empty.</p>
 		</div>
 	{/if}
 {:else}
 	<p>Loading...</p>
 {/if}
-
-<style>
-	.container {
-		display: flex;
-		flex-direction: row;
-		gap: 20px;
-		flex-wrap: wrap;
-	}
-
-	.empty-state {
-		text-align: center;
-		padding: 20px;
-	}
-</style>

src/lib/components/VolumeItem.svelte

@@ -12,25 +12,14 @@
 </script>
 
 <a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
-	<div class="content">
+	<div class="flex flex-col gap-[5px] text-center">
 		{volumeName}
 		{#if files}
-			<img src={URL.createObjectURL(Object.values(files)[0])} alt="img" />
+			<img
+				src={URL.createObjectURL(Object.values(files)[0])}
+				alt="img"
+				class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
+			/>
 		{/if}
 	</div>
 </a>
-
-<style>
-	img {
-		width: 250px;
-		height: 350px;
-		object-fit: contain;
-	}
-
-	.content {
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
-		text-align: center;
-	}
-</style>

src/routes/+layout.svelte

@@ -6,7 +6,10 @@
 	import { settings } from '$lib/settings';
 </script>
 
-<div class="h-full min-h-screen text-white" style:background-color={$settings.backgroundColor}>
+<div
+	class="h-full min-h-screen w-full min-w-max text-white"
+	style:background-color={$settings.backgroundColor}
+>
 	<NavBar />
 	<Snackbar />
 	<ConfirmationPopup />

src/routes/[manga]/+page.svelte

@@ -34,11 +34,11 @@
 	}
 </script>
 
-<div class="p-2">
+<div class="p-2 flex flex-col gap-5">
-	<div class="float-right">
+	<div class="sm:block flex-col flex">
-		<Button outline color="red" on:click={onDelete}>Delete manga</Button>
+		<Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
 	</div>
-	<div class="volumes">
+	<div class="flex flex-row gap-5 flex-wrap">
 		{#if manga}
 			{#each manga as volume}
 				<VolumeItem {volume} />
@@ -46,12 +46,3 @@
 		{/if}
 	</div>
 </div>
-
-<style>
-	.volumes {
-		display: flex;
-		flex-direction: row;
-		gap: 20px;
-		flex-wrap: wrap;
-	}
-</style>