From 3b6e5853d84383a6f78c61f2e1ce5b82558148a8 Mon Sep 17 00:00:00 2001
From: Lucas Lima <limalucas454@gmail.com>
Date: Sat, 27 Aug 2022 01:52:24 +0000
Subject: [PATCH 1/4] fixing login page unaligned with center on mobile

---
 apps/ui/src/routes/__layout.svelte | 4 +++-
 apps/ui/src/routes/login.svelte    | 9 +++++----
 apps/ui/src/tailwind.css           | 8 +-------
 3 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/apps/ui/src/routes/__layout.svelte b/apps/ui/src/routes/__layout.svelte
index e808f555a..39c6d1401 100644
--- a/apps/ui/src/routes/__layout.svelte
+++ b/apps/ui/src/routes/__layout.svelte
@@ -388,5 +388,7 @@
 	{/if}
 {/if}
 <main>
-	<slot />
+	<div class="px-20">
+		<slot />
+	</div>
 </main>
diff --git a/apps/ui/src/routes/login.svelte b/apps/ui/src/routes/login.svelte
index 289d23c69..88bd5e698 100644
--- a/apps/ui/src/routes/login.svelte
+++ b/apps/ui/src/routes/login.svelte
@@ -69,6 +69,7 @@
 				required
 				bind:this={emailEl}
 				bind:value={email}
+				class="w-56 md:w-96"
 			/>
 			<input
 				type="password"
@@ -76,6 +77,7 @@
 				placeholder={$t('forms.password')}
 				bind:value={password}
 				required
+				class="w-56 md:w-96"
 			/>
 
 			<div class="flex space-x-2 h-8 items-center justify-center pt-8">
@@ -83,14 +85,13 @@
 					type="submit"
 					disabled={loading}
 					class="btn btn-sm"
-					class:loading={loading}
+					class:loading
 					class:bg-coollabs={!loading}
 					>{loading ? $t('login.authenticating') : $t('login.login')}</button
 				>
 
-				<button
-					on:click|preventDefault={gotoRegister}
-					class="btn btn-sm">{$t('register.register')}</button
+				<button on:click|preventDefault={gotoRegister} class="btn btn-sm"
+					>{$t('register.register')}</button
 				>
 			</div>
 		</form>
diff --git a/apps/ui/src/tailwind.css b/apps/ui/src/tailwind.css
index 52d7d24c7..5b551a4c8 100644
--- a/apps/ui/src/tailwind.css
+++ b/apps/ui/src/tailwind.css
@@ -24,12 +24,6 @@ body {
 	@apply min-h-screen overflow-x-hidden bg-coolblack text-sm text-white scrollbar-w-1 scrollbar-thumb-coollabs scrollbar-track-coolgray-200;
 }
 
-main,
-.main {
-	width: calc(100% - 4rem);
-	margin-left: 4rem;
-}
-
 input {
 	@apply h-12 w-96 rounded border border-transparent bg-transparent bg-coolgray-200 p-2 text-xs tracking-tight text-white placeholder-stone-600 outline-none transition duration-150 hover:bg-coolgray-500 focus:bg-coolgray-500 disabled:border disabled:border-dashed disabled:border-coolgray-300 disabled:bg-transparent md:text-sm;
 }
@@ -106,7 +100,7 @@ a {
 	@apply mr-4 text-base tracking-tight md:text-2xl font-bold;
 }
 .nav-main {
-	@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-auto border-r border-stone-800 bg-coolgray-200 scrollbar-w-1  scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
+	@apply fixed top-0 left-0 min-h-screen w-16 min-w-[4rem] overflow-hidden border-r border-stone-800 bg-coolgray-200 scrollbar-w-1  scrollbar-thumb-coollabs scrollbar-track-coolgray-200 xl:overflow-visible;
 }
 
 .nav-side {

From 6c065a64fa2224100199549bb5923b3fb1b21478 Mon Sep 17 00:00:00 2001
From: Lucas Lima <limalucas454@gmail.com>
Date: Sat, 27 Aug 2022 01:52:45 +0000
Subject: [PATCH 2/4] fixing responsiveness issues with cleanup and restart
 buttons

---
 apps/ui/src/lib/components/Usage.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte
index a461f8419..405290966 100644
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -85,17 +85,19 @@
 </script>
 
 <div class="w-full">
-	<div class="flex items-center">
+	<div class="items-center grid grid-flow-row md:grid-flow-col md:w-96 gap-4">
 		<h1 class="title text-4xl">Hardware Details</h1>
-		<div class="flex  space-x-4">
+		<div class="grid gap-4">
 			{#if $appSession.teamId === '0'}
-				<button on:click={manuallyCleanupStorage} class:loading={loading.cleanup} class="btn btn-sm"
-					>Cleanup Storage</button
+				<button
+					on:click={manuallyCleanupStorage}
+					class:loading={loading.cleanup}
+					class="btn btn-sm  h-14">Cleanup Storage</button
 				>
 				<button
 					on:click={restartCoolify}
 					class:loading={loading.restart}
-					class="btn btn-sm bg-red-600 hover:bg-red-500">Restart Coolify</button
+					class="btn btn-sm h-14 bg-red-600 hover:bg-red-500">Restart Coolify</button
 				>
 			{/if}
 		</div>

From 1922e5e0146d10e2c7a9d7ea146a02e300c85f14 Mon Sep 17 00:00:00 2001
From: Lucas Lima <limalucas454@gmail.com>
Date: Sat, 27 Aug 2022 02:10:35 +0000
Subject: [PATCH 3/4] minor fixes to desktop grid flow

---
 apps/ui/src/lib/components/Usage.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/ui/src/lib/components/Usage.svelte b/apps/ui/src/lib/components/Usage.svelte
index 405290966..4042c8e20 100644
--- a/apps/ui/src/lib/components/Usage.svelte
+++ b/apps/ui/src/lib/components/Usage.svelte
@@ -87,17 +87,17 @@
 <div class="w-full">
 	<div class="items-center grid grid-flow-row md:grid-flow-col md:w-96 gap-4">
 		<h1 class="title text-4xl">Hardware Details</h1>
-		<div class="grid gap-4">
+		<div class="grid lg:grid-flow-col gap-4">
 			{#if $appSession.teamId === '0'}
 				<button
 					on:click={manuallyCleanupStorage}
 					class:loading={loading.cleanup}
-					class="btn btn-sm  h-14">Cleanup Storage</button
+					class="btn btn-sm w-36 h-14">Cleanup Storage</button
 				>
 				<button
 					on:click={restartCoolify}
 					class:loading={loading.restart}
-					class="btn btn-sm h-14 bg-red-600 hover:bg-red-500">Restart Coolify</button
+					class="btn btn-sm w-36 h-14 bg-red-600 hover:bg-red-500">Restart Coolify</button
 				>
 			{/if}
 		</div>

From cb7659bb86346efde4db873959a1caa4ff563941 Mon Sep 17 00:00:00 2001
From: Lucas Lima <limalucas454@gmail.com>
Date: Sat, 27 Aug 2022 12:58:03 +0000
Subject: [PATCH 4/4] fixing sizes in register screen on mobile too :D

---
 apps/ui/src/routes/register.svelte | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/ui/src/routes/register.svelte b/apps/ui/src/routes/register.svelte
index 438c8a20e..1a2eb7487 100644
--- a/apps/ui/src/routes/register.svelte
+++ b/apps/ui/src/routes/register.svelte
@@ -101,6 +101,7 @@
 					required
 					bind:this={emailEl}
 					bind:value={email}
+					class="w-56 md:w-96"
 				/>
 				<input
 					type="password"
@@ -109,6 +110,7 @@
 					bind:this={passwordEl}
 					bind:value={password}
 					required
+					class="w-56 md:w-96"
 				/>
 				<input
 					type="password"
@@ -116,6 +118,7 @@
 					placeholder={$t('forms.password_again')}
 					bind:value={passwordCheck}
 					required
+					class="w-56 md:w-96"
 				/>
 
 				<div class="flex space-x-2 h-8 items-center justify-center pt-8">
@@ -125,8 +128,7 @@
 						disabled={loading}
 						class:bg-transparent={loading}
 						class:bg-coollabs={!loading}
-						class:loading={loading}
-						>{loading ? $t('register.registering') : $t('register.register')}</button
+						class:loading>{loading ? $t('register.registering') : $t('register.register')}</button
 					>
 				</div>
 			</form>