fix: some screen too large

apps/desktop2/src/routes/auth.lazy.tsx

@@ -1,4 +1,4 @@
-import { Box, Container } from "@lume/ui";
+import { Container } from "@lume/ui";
 import { Outlet, createLazyFileRoute } from "@tanstack/react-router";
 
 export const Route = createLazyFileRoute("/auth")({
@@ -8,9 +8,9 @@ export const Route = createLazyFileRoute("/auth")({
 function Screen() {
 	return (
 		<Container withDrag>
-			<Box className="px-3 pt-3">
+			<div className="max-w-sm mx-auto size-full">
 				<Outlet />
-			</Box>
+			</div>
 		</Container>
 	);
 }

apps/desktop2/src/routes/auth/create-profile.tsx

@@ -55,12 +55,13 @@ function Screen() {
 	};
 
 	return (
-		<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
+		<div className="flex flex-col items-center justify-center size-full gap-4">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Let's set up your profile.</h3>
 			</div>
-			<div>
+			<form onSubmit={handleSubmit(onSubmit)} className="w-full mb-0">
-				<div className="relative rounded-full size-24 bg-gradient-to-tr from-orange-100 via-red-50 to-blue-200">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
+					<div className="self-center relative rounded-full size-20 bg-neutral-200 dark:bg-white/70 my-3">
 						{picture ? (
 							<img
 								src={picture}
@@ -77,11 +78,6 @@ function Screen() {
 							<PlusIcon className="size-8" />
 						</AvatarUploader>
 					</div>
-			</div>
-			<form
-				onSubmit={handleSubmit(onSubmit)}
-				className="flex flex-col w-full gap-3"
-			>
 					<div className="flex flex-col gap-1">
 						<label htmlFor="display_name" className="font-medium">
 							Display Name *
@@ -129,9 +125,11 @@ function Screen() {
 							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-500 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 						/>
 					</div>
+				</div>
 				<button
 					type="submit"
-					className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					disabled={loading}
+					className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
 				>
 					{loading ? <Spinner /> : "Continue"}
 				</button>

apps/desktop2/src/routes/auth/import.lazy.tsx

@@ -38,11 +38,12 @@ function Screen() {
 	};
 
 	return (
-		<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
+		<div className="flex flex-col items-center justify-center size-full gap-4">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Continue with Private Key</h3>
 			</div>
-			<div className="flex flex-col w-full gap-3">
+			<div className="flex flex-col w-full">
+				<div className="flex flex-col gap-3 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
 					<div className="flex flex-col gap-1">
 						<label
 							htmlFor="key"
@@ -74,11 +75,12 @@ function Screen() {
 							className="px-3 border-transparent rounded-lg h-11 bg-neutral-100 placeholder:text-neutral-600 focus:border-blue-500 focus:ring-0 dark:bg-white/10 dark:placeholder:text-neutral-400"
 						/>
 					</div>
+				</div>
 				<button
 					type="button"
 					onClick={() => submit()}
 					disabled={loading}
-					className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
+					className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
 				>
 					{loading ? <Spinner /> : "Login"}
 				</button>

apps/desktop2/src/routes/auth/remote.lazy.tsx

@@ -37,12 +37,12 @@ function Screen() {
 	};
 
 	return (
-		<div className="flex flex-col items-center justify-center w-full h-full gap-6 px-5 mx-auto xl:max-w-xl">
+		<div className="flex flex-col items-center justify-center size-full gap-4">
 			<div className="text-center">
 				<h3 className="text-xl font-semibold">Continue with Nostr Connect</h3>
 			</div>
-			<div className="flex flex-col w-full gap-3">
+			<div className="flex flex-col w-full">
-				<div className="flex flex-col gap-1">
+				<div className="flex flex-col gap-1 w-full p-3 overflow-hidden bg-white rounded-xl shadow-primary dark:bg-white/10 dark:ring-1 ring-white/15">
 					<label
 						htmlFor="uri"
 						className="font-medium text-neutral-900 dark:text-neutral-100"
@@ -63,7 +63,7 @@ function Screen() {
 						type="button"
 						onClick={() => submit()}
 						disabled={loading}
-						className="inline-flex items-center justify-center w-full mt-3 font-semibold text-white bg-blue-500 rounded-lg h-11 shrink-0 hover:bg-blue-600 disabled:opacity-50"
+						className="inline-flex items-center justify-center w-full h-9 mt-4 text-sm font-semibold text-white bg-blue-500 rounded-lg shrink-0 hover:bg-blue-600 disabled:opacity-50"
 					>
 						{loading ? <Spinner /> : "Login"}
 					</button>

apps/desktop2/src/routes/bootstrap-relays.tsx

@@ -65,9 +65,9 @@ function Screen() {
 				data-tauri-drag-region
 				className="absolute top-0 left-0 h-14 w-full"
 			/>
-			<div className="flex items-end justify-center flex-1 w-full px-4 pb-10">
+			<div className="flex items-end justify-center flex-1 w-full px-4 pb-4">
 				<div className="text-center">
-					<h2 className="text-2xl font-semibold">Customize Bootstrap Relays</h2>
+					<h2 className="text-xl font-semibold">Customize Bootstrap Relays</h2>
 				</div>
 			</div>
 			<div className="flex flex-col items-center flex-1 w-full">