From 53f5a48d3e58f73c894bf074bbd09eb070b881f8 Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Mon, 25 Sep 2023 14:48:33 +0200
Subject: [PATCH] Improve mobile gallery styling

---
 src/lib/components/Catalog.svelte     | 2 +-
 src/lib/components/CatalogItem.svelte | 2 +-
 src/lib/components/VolumeItem.svelte  | 4 ++--
 src/routes/[manga]/+page.svelte       | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Catalog.svelte b/src/lib/components/Catalog.svelte
index 3aa9728..bcfb898 100644
--- a/src/lib/components/Catalog.svelte
+++ b/src/lib/components/Catalog.svelte
@@ -16,7 +16,7 @@
       <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">
+      <div class="flex sm:flex-row flex-col gap-5 flex-wrap justify-center sm:justify-start">
         {#each $catalog as { id, manga } (id)}
           <CatalogItem {manga} />
         {/each}
diff --git a/src/lib/components/CatalogItem.svelte b/src/lib/components/CatalogItem.svelte
index ff68f64..1b82914 100644
--- a/src/lib/components/CatalogItem.svelte
+++ b/src/lib/components/CatalogItem.svelte
@@ -10,7 +10,7 @@
 </script>
 
 <a href={volumeName} on:click={onClick}>
-  <div class="flex flex-col gap-[5px] text-center">
+  <div class="flex flex-col gap-[5px] text-center items-center">
     {mokuroData.title}
     {#if files}
       <img
diff --git a/src/lib/components/VolumeItem.svelte b/src/lib/components/VolumeItem.svelte
index b762aca..e379610 100644
--- a/src/lib/components/VolumeItem.svelte
+++ b/src/lib/components/VolumeItem.svelte
@@ -12,13 +12,13 @@
 </script>
 
 <a href={`${$page.params.manga}/${volumeName}`} on:click={onClick}>
-  <div class="flex flex-col gap-[5px] text-center">
+  <div class="flex flex-col gap-[5px] text-center items-center">
     {volumeName}
     {#if files}
       <img
         src={URL.createObjectURL(Object.values(files)[0])}
         alt="img"
-        class="object-contain w-[250px] h-[350px] bg-black border-gray-900 border"
+        class="object-contain sm:w-[250px] h-[350px] bg-black border-gray-900 border"
       />
     {/if}
   </div>
diff --git a/src/routes/[manga]/+page.svelte b/src/routes/[manga]/+page.svelte
index 2fdb229..11c58b5 100644
--- a/src/routes/[manga]/+page.svelte
+++ b/src/routes/[manga]/+page.svelte
@@ -38,7 +38,7 @@
   <div class="sm:block flex-col flex">
     <Button outline color="red" class="float-right" on:click={onDelete}>Delete manga</Button>
   </div>
-  <div class="flex flex-row gap-5 flex-wrap">
+  <div class="flex sm:flex-row flex-col justify-center sm:justify-start gap-5 flex-wrap">
     {#if manga}
       {#each manga as volume}
         <VolumeItem {volume} />