Fix(popup): adjust widths and text to be responsive to small screens

Pairadux · Oct 31, 2024 · af65a38 · af65a38
1 parent d383378
commit af65a38
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/lib/popups/DevelopmentPopup.svelte b/src/lib/popups/DevelopmentPopup.svelte
@@ -6,19 +6,19 @@
     open
     class="fixed left-0 top-0 z-50 h-screen w-screen">
     <div class="flex h-full w-full flex-col items-center gap-8 justify-center bg-white dark:bg-black">
-        <div class="flex w-1/3 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex w-4/5 lg:w-1/3 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
             <img
                 src="{assets}/images/icons/alert.svg"
                 alt=""
                 class="h-16" />
-            <h2 class="text-2xl dark:text-white">This site is a work in progress</h2>
+            <h2 class="text-center text-2xl dark:text-white">This site is a work in progress</h2>
             <p class="w-3/4 text-center dark:text-white">If you wish to proceed, please click the button below</p>
             <form method="dialog">
                 <button class="mt-4 rounded-lg bg-black p-2 text-white dark:bg-white dark:text-black">Proceed</button>
             </form>
         </div>
 
-        <div class="flex w-1/3 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
+        <div class="flex w-4/5 lg:w-1/3 flex-col items-center justify-center rounded-lg border border-gray-200 bg-white p-6 shadow dark:border-gray-700 dark:bg-gray-800">
             <img
                 src="{assets}/images/icons/question.svg"
                 alt=""