fixing login page unaligned with center on mobile

Author: LLxD

apps/ui/src/routes/__layout.svelte

@@ -388,5 +388,7 @@
 	{/if}
 {/if}
 <main>
-	<slot />
+	<div class="px-20">
+		<slot />
+	</div>
 </main>

apps/ui/src/routes/login.svelte

@@ -69,28 +69,29 @@
 				required
 				bind:this={emailEl}
 				bind:value={email}
+				class="w-56 md:w-96"
 			/>
 			<input
 				type="password"
 				name="password"
 				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">
 				<button
 					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>

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 {