From 3ddafa4fff291564e69ff0666e702113354563a8 Mon Sep 17 00:00:00 2001
From: Dogma <103559271+ArtificialDogma@users.noreply.github.com>
Date: Fri, 3 May 2024 00:20:10 +1000
Subject: [PATCH] Additional responsive changes [Login]

- Updated responsive design for login screen to go fill the entire screen when on small screen sizes i.e. mobile
---
 frontend/react/src/ui/modals/components/card.tsx  | 2 +-
 frontend/react/src/ui/modals/components/modal.tsx | 2 +-
 frontend/react/src/ui/modals/login.tsx            | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/react/src/ui/modals/components/card.tsx b/frontend/react/src/ui/modals/components/card.tsx
index 803b20b8..e551a5cb 100644
--- a/frontend/react/src/ui/modals/components/card.tsx
+++ b/frontend/react/src/ui/modals/components/card.tsx
@@ -6,7 +6,7 @@ export function Card(props: {
 	children?: JSX.Element | JSX.Element[],
     className?: string
 }) {
-    return <div className={props.className + "flex flex-col gap-3 max-h-80 w-full max-w-64 dark:hover:bg-olympus-300 content-start rounded-md p-5 drop-shadow dark:bg-olympus-500 text-black dark:text-white text-pretty cursor-pointer"}>
+    return <div className={props.className + "flex flex-col gap-3 max-h-80 w-full max-w-64 max-lg:max-w-[100%] dark:hover:bg-olympus-300 content-start rounded-md p-5 drop-shadow dark:bg-olympus-500 text-black dark:text-white text-pretty cursor-pointer"}>
         {props.children}
         <div className='flex flex-grow justify-end items-end text-black dark:text-gray-500'><FontAwesomeIcon className="" icon={faArrowRight} /></div>
     </div>
diff --git a/frontend/react/src/ui/modals/components/modal.tsx b/frontend/react/src/ui/modals/components/modal.tsx
index b873652f..dbab1f23 100644
--- a/frontend/react/src/ui/modals/components/modal.tsx
+++ b/frontend/react/src/ui/modals/components/modal.tsx
@@ -5,7 +5,7 @@ export function Modal(props: {
 	children?: JSX.Element | JSX.Element[],
     className?: string
 }) {
-    return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-48%] z-ui-4 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow"}>
+    return <div className={props.className + "fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-ui-4 rounded-xl border-solid border-[1px] border-gray-500 drop-shadow "}>
         {props.children}
     </div>
 }
\ No newline at end of file
diff --git a/frontend/react/src/ui/modals/login.tsx b/frontend/react/src/ui/modals/login.tsx
index 3533ac97..b4e0fdad 100644
--- a/frontend/react/src/ui/modals/login.tsx
+++ b/frontend/react/src/ui/modals/login.tsx
@@ -17,8 +17,8 @@ export function LoginModal(props: {
     const [password, setPassword] = useState("");
     const [displayName, setDisplayName] = useState("");
 
-    return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] max-w-[1100px] bg-white dark:bg-olympus-800 ">
-        <div className='absolute gap-8 flex flex-col p-16 max-lg:p-12 w-full'>
+    return <Modal className="inline-flex max-h-[600px] overflow-y-auto h-[75%] scroll-smooth w-[80%] max-w-[1100px] bg-white dark:bg-olympus-800 max-md:w-full max-md:h-full max-md:max-h-full max-md:rounded-none max-md:border-none ">
+        <div className='absolute gap-8 flex flex-col p-16 max-lg:p-8 w-full '>
             <div className="flex flex-row max-lg:flex-col w-full gap-6">
                 <div className="flex flex-grow flex-col gap-5 w-[40%] max-lg:w-[100%] content-center justify-start">
                     {
@@ -82,7 +82,7 @@ export function LoginModal(props: {
                 </div>
                 <div className='flex flex-grow flex-row overflow-hidden gap-2 content-end justify-center max-lg:justify-start max-md:flex-col'>
                     <Card className=''>
-                        <img src="/resources/theme/images/splash/1.jpg" className='h-[40%] contents-center w-full object-cover rounded-md'></img>
+                        <img src="/resources/theme/images/splash/1.jpg" className='h-[40%] max-h-[120px] contents-center w-full object-cover rounded-md'></img>
                         <div className='font-bold mt-2'>
                             YouTube Video Guide
                         </div>
@@ -91,7 +91,7 @@ export function LoginModal(props: {
                         </div>
                     </Card>
                     <Card className=''>
-                        <img src="/resources/theme/images/splash/1.jpg" className='h-[40%] contents-center w-full object-cover rounded-md'></img>
+                        <img src="/resources/theme/images/splash/1.jpg" className='h-[40%] max-h-[120px] contents-center w-full object-cover rounded-md'></img>
                         <div className='font-bold mt-2'>
                             Wiki Guide
                         </div>