From ebfce0db6553bd6335b712df1967c77ce852794a Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Mon, 18 Dec 2023 15:42:49 +0100
Subject: [PATCH] Slight restyle to better fit mobile screens

---
 client-solid/src/Containers/LoginModal.tsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/client-solid/src/Containers/LoginModal.tsx b/client-solid/src/Containers/LoginModal.tsx
index 0c5ef43..91ebfab 100644
--- a/client-solid/src/Containers/LoginModal.tsx
+++ b/client-solid/src/Containers/LoginModal.tsx
@@ -19,7 +19,7 @@ export function LoginModal(): JSXElement {
   return (
     <Show when={modal_ctx.isOpen()}>
       <dialog class="modal modal-open">
-        <div class="modal-box">
+        <div class="modal-box p-4 md:p-6">
           <form method="dialog">
             <button
               onClick={closeModal}
@@ -37,9 +37,9 @@ export function LoginModal(): JSXElement {
               aria-label="Login"
               checked
             />
-            <div class="tab-content rounded-box border-base-300 bg-base-100 p-10">
+            <FormContainer>
               <LoginForm />
-            </div>
+            </FormContainer>
 
             <input
               type="radio"
@@ -47,10 +47,10 @@ export function LoginModal(): JSXElement {
               class="tab"
               aria-label="Register"
             />
-            <div class="tab-content rounded-box border-base-300 bg-base-100 p-10">
-              <RegisterForm />
-            </div>
           </div>
+          <FormContainer>
+            <RegisterForm />
+          </FormContainer>
         </div>
         <form method="dialog" class="modal-backdrop">
           <button onClick={closeModal}>close</button>
@@ -59,3 +59,12 @@ export function LoginModal(): JSXElement {
     </Show>
   );
 }
+
+// Local wrapper component for the login and register forms
+function FormContainer({ children }: { children: JSXElement }): JSXElement {
+  return (
+    <div class="tab-content rounded-box border-base-300 bg-base-100 p-2 md:p-10">
+      <span class="label-text">{children}</span>
+    </div>
+  );
+}