From 31f4aee1e8d73d3804f968f0deb5d07d1c5c840a Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 29 Dec 2024 13:55:39 +0500
Subject: [PATCH] center stickers in pack preview on mobile

---
 index.html             |  2 +-
 static/pack_preview.js |  2 +-
 static/tailwind.css    | 12 ++++++++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 7e67b2c..8f92f0c 100644
--- a/index.html
+++ b/index.html
@@ -87,7 +87,7 @@
             <div class="p-4 rounded-lg shadow-lg bg-stone-800 text-slate-200 ">
                 <p class="text-2xl">Pack Preview <span id="preview_sticker_pack_stickers_count"></span></p>
                 <div class="flex flex-wrap gap-4 mt-4 " id="preview_sticker_pack_stickers">
-                    <img src="static/images/cinny.png" alt="" class="hidden object-contain w-20" />
+                    <img src="static/images/cinny.png" alt="" class="hidden object-contain md:w-20 w-24" />
                 </div>
             </div>
         </div>
diff --git a/static/pack_preview.js b/static/pack_preview.js
index 3aa9fdd..5ead593 100644
--- a/static/pack_preview.js
+++ b/static/pack_preview.js
@@ -133,7 +133,7 @@ function updatePackInfo(data) {
     const stickerImage = document.createElement("img");
     stickerImage.src = getStickerImage(sticker.id);
     stickerImage.alt = sticker.body;
-    stickerImage.classList.add('object-contain', 'w-20')
+    stickerImage.classList.add('object-contain', 'md:w-20', "w-24")
     packStickers.appendChild(stickerImage);
   }
 }
diff --git a/static/tailwind.css b/static/tailwind.css
index 129cb0f..2df884f 100644
--- a/static/tailwind.css
+++ b/static/tailwind.css
@@ -657,6 +657,10 @@ video {
   width: 100%;
 }
 
+.w-24 {
+  width: 6rem;
+}
+
 .max-w-\[90\%\] {
   max-width: 90%;
 }
@@ -847,6 +851,14 @@ video {
     width: 600px;
   }
 
+  .md\:w-24 {
+    width: 6rem;
+  }
+
+  .md\:w-20 {
+    width: 5rem;
+  }
+
   .md\:max-w-\[768px\] {
     max-width: 768px;
   }