Attempt to fix mobile styling

src/lib/components/Catalog.svelte

@@ -12,31 +12,21 @@
 
 {#if $catalog}
 	{#if $catalog.length > 0}
-		<Button outline color="red" class="float-right" on:click={onClear}>Clear catalog</Button>
-		<div class="container">
-			{#each $catalog as { id, manga } (id)}
-				<CatalogItem {manga} />
-			{/each}
+		<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>
+			<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>