From 8e534c1b21633fa7f2ca9dfc4528cfd2680f46db Mon Sep 17 00:00:00 2001
From: fastlorenzo <git@bernardi.be>
Date: Sat, 30 Nov 2024 15:05:09 +0100
Subject: [PATCH 1/3] Make login page responsive

Signed-off-by: fastlorenzo <git@bernardi.be>
---
 .../(authentication)/login/+page.svelte       | 21 +++++++++++++------
 .../(authentication)/login/FormCard.svelte    |  2 +-
 .../(authentication)/login/Greetings.svelte   |  5 ++++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/(authentication)/login/+page.svelte b/frontend/src/routes/(authentication)/login/+page.svelte
index d7fcc0f30..2726cba53 100644
--- a/frontend/src/routes/(authentication)/login/+page.svelte
+++ b/frontend/src/routes/(authentication)/login/+page.svelte
@@ -8,16 +8,25 @@
 	export let form: ActionData;
 </script>
 
-<div class="relative h-screen w-screen bg-slate-200">
-	<div class="absolute top-5 left-5">
-		<div class="flex flex-row max-w-48 space-x-4 pb-3">
+<div class="lg:relative h-screen w-screen bg-slate-200">
+	<div
+		class="invisible lg:visible absolute top-5 left-1/2 transform -translate-x-1/2 top-5 left-5 transform-none"
+	>
+		<div class="flex justify-center justify-start flex-row max-w-48 space-x-4 pb-3">
 			<Logo />
 		</div>
 	</div>
-	<div class="absolute top-1/2 left-1/2 w-full transform -translate-x-1/2 -translate-y-1/2">
-		<div class="flex flex-row w-full pr-8">
+	<div class="lg:invisible pt-5 flex justify-center">
+		<div class="flex justify-center flex-row max-w-48 space-x-4 pb-3">
+			<Logo />
+		</div>
+	</div>
+	<div
+		class="lg:absolute lg:top-1/2 lg:left-1/2 w-full transform lg:-translate-x-1/2 lg:-translate-y-1/2"
+	>
+		<div class="flex flex-col lg:flex-row w-full lg:pr-8 space-y-4 lg:space-y-0 lg:space-x-4">
 			<Greetings />
-			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
+			<div class="flex justify-center lg:pr-5 items-center w-full lg:w-2/5">
 				<FormCard {data} {form} />
 			</div>
 		</div>
diff --git a/frontend/src/routes/(authentication)/login/FormCard.svelte b/frontend/src/routes/(authentication)/login/FormCard.svelte
index 2baaa8ef5..fbe008c82 100644
--- a/frontend/src/routes/(authentication)/login/FormCard.svelte
+++ b/frontend/src/routes/(authentication)/login/FormCard.svelte
@@ -42,7 +42,7 @@
 	$: form && form.mfaFlow ? modalMFAAuthenticate() : null;
 </script>
 
-<div class="flex flex-col w-3/4 p-10 rounded-lg shadow-lg bg-white bg-opacity-[.90]">
+<div class="flex flex-col w-7/8 lg:w-3/4 p-10 rounded-lg shadow-lg bg-white bg-opacity-[.90]">
 	<div data-testid="login" class="flex flex-col w-full items-center space-y-4">
 		<div class="bg-primary-300 px-6 py-5 rounded-full text-3xl">
 			<i class="fa-solid fa-right-to-bracket" />
diff --git a/frontend/src/routes/(authentication)/login/Greetings.svelte b/frontend/src/routes/(authentication)/login/Greetings.svelte
index d21c67ca3..83390118a 100644
--- a/frontend/src/routes/(authentication)/login/Greetings.svelte
+++ b/frontend/src/routes/(authentication)/login/Greetings.svelte
@@ -3,7 +3,10 @@
 	import Typewriter from 'svelte-typewriter';
 </script>
 
-<div id="hellothere" class="flex flex-col justify-center items-center w-3/5 text-gray-900">
+<div
+	id="hellothere"
+	class="flex flex-col justify-center items-center lg:w-3/5 text-gray-900 px-4 lg:px-0"
+>
 	<Typewriter mode="loopOnce" cursor={false} interval={50}>
 		<div class="text-2xl unstyled text-center pb-4">
 			<span class="text-2xl text-center">{m.helloThere()} </span>

From c318d5473133a5125158a73532846d4ab768633e Mon Sep 17 00:00:00 2001
From: fastlorenzo <git@bernardi.be>
Date: Sat, 30 Nov 2024 15:08:43 +0100
Subject: [PATCH 2/3] Make password reset page responsive

Signed-off-by: fastlorenzo <git@bernardi.be>
---
 .../src/routes/(authentication)/password-reset/+page.svelte     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/routes/(authentication)/password-reset/+page.svelte b/frontend/src/routes/(authentication)/password-reset/+page.svelte
index f78f314b4..cf4b04955 100644
--- a/frontend/src/routes/(authentication)/password-reset/+page.svelte
+++ b/frontend/src/routes/(authentication)/password-reset/+page.svelte
@@ -18,7 +18,7 @@
 		</div>
 	</div>
 	<div class="flex items-center justify-center p-10 space-x-4 w-full">
-		<div class="w-1/4 p-6 shadow-lg rounded-lg bg-white">
+		<div class="lg:w-1/4 p-6 shadow-lg rounded-lg bg-white">
 			<div id="password_reset" class="flex flex-col items-center space-y-4">
 				<div class="bg-primary-300 px-6 py-5 rounded-full text-3xl">
 					<i class="fa-solid fa-lock" />

From 1d8167b1eb99180c9f25bb3ca12a582bec281211 Mon Sep 17 00:00:00 2001
From: fastlorenzo <git@bernardi.be>
Date: Sat, 30 Nov 2024 15:29:08 +0100
Subject: [PATCH 3/3] Make enterprise login page responsive

Signed-off-by: fastlorenzo <git@bernardi.be>
---
 .../(authentication)/login/+page.svelte       | 23 ++++++++++++++-----
 .../(authentication)/login/Greetings.svelte   |  5 +++-
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/enterprise/frontend/src/routes/(authentication)/login/+page.svelte b/enterprise/frontend/src/routes/(authentication)/login/+page.svelte
index f34fdac3d..b5269596d 100644
--- a/enterprise/frontend/src/routes/(authentication)/login/+page.svelte
+++ b/enterprise/frontend/src/routes/(authentication)/login/+page.svelte
@@ -8,18 +8,29 @@
 	export let form: ActionData;
 </script>
 
-<div class="relative h-screen w-screen bg-slate-200">
-	<div class="absolute top-5 left-5">
-		<div class="flex flex-row max-w-48 space-x-4 pb-3">
+<div class="lg:relative h-screen w-screen bg-slate-200">
+	<div
+		class="invisible lg:visible absolute top-5 left-1/2 transform -translate-x-1/2 top-5 left-5 transform-none"
+	>
+		<div class="flex justify-center justify-start flex-row max-w-48 space-x-4 pb-3">
 			{#if !data.clientSettings.settings.name}
 				<Logo />
 			{/if}
 		</div>
 	</div>
-	<div class="absolute top-1/2 left-1/2 w-full transform -translate-x-1/2 -translate-y-1/2">
-		<div class="flex flex-row w-full pr-8">
+	<div class="lg:invisible pt-5 flex justify-center">
+		<div class="flex justify-center flex-row max-w-48 space-x-4 pb-3">
+			{#if !data.clientSettings.settings.name}
+				<Logo />
+			{/if}
+		</div>
+	</div>
+	<div
+		class="lg:absolute lg:top-1/2 lg:left-1/2 w-full transform lg:-translate-x-1/2 lg:-translate-y-1/2"
+	>
+		<div class="flex flex-col lg:flex-row w-full lg:pr-8 space-y-4 lg:space-y-0 lg:space-x-4">
 			<Greetings />
-			<div class="flex justify-center pr-5 items-center space-y-4 w-2/5">
+			<div class="flex justify-center lg:pr-5 items-center w-full lg:w-2/5">
 				<FormCard {data} {form} />
 			</div>
 		</div>
diff --git a/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte b/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte
index 7b667197d..070dbd6ff 100644
--- a/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte
+++ b/enterprise/frontend/src/routes/(authentication)/login/Greetings.svelte
@@ -7,7 +7,10 @@
 	const clientSettings = $page.data.clientSettings;
 </script>
 
-<div id="hellothere" class="flex flex-col justify-center items-center w-3/5 text-gray-900">
+<div
+	id="hellothere"
+	class="flex flex-col justify-center items-center lg:w-3/5 text-gray-900 px-4 lg:px-0"
+>
 	{#if !clientSettings?.settings.name}
 		<Typewriter mode="loopOnce" cursor={false} interval={50}>
 			<div class="text-2xl unstyled text-center pb-4">