fix: mobile responsive issues on onboarding (#453)

apps/web/app/onboarding/bio-form.tsx

@@ -31,23 +31,23 @@ export function BioForm() {
 		})
 	}
 	return (
-		<div className="relative">
+		<div className="relative w-full">
 			<div className="space-y-4">
 				<NavMenu>
 					<p className="text-base text-white/60">
 						Step {getStepNumberFor("bio")} of {totalSteps}
 					</p>
 				</NavMenu>
-				<h1 className="max-sm:text-4xl text-white font-medium">
-					Tell us about yourself
+				<h1 className="text-2xl md:text-4xl text-white font-medium">
+					Tell Supermemory about yourself
 				</h1>
-				<p className="text-2xl max-sm:text-lg text-white/80">
-					What should Supermemory know about you?
+				<p className="text-lg md:text-xl text-white/80">
+					share with Supermemory what you do, who you are, and what you're interested in
 				</p>
 			</div>
 			<Textarea
 				autoFocus
-				className="font-sans mt-6 text-base! text-white tracking-normal font-medium border bg-white/30 border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)]"
+				className="font-sans mt-6 text-base! placeholder:text-white/80 text-white tracking-normal font-medium border bg-white/30 border-zinc-200 rounded-lg !field-sizing-normal !min-h-[calc(3*1.5rem+1rem)] w-full"
 				placeholder="I'm a software engineer from San Francisco..."
 				rows={3}
 				value={bio}
@@ -61,12 +61,12 @@ export function BioForm() {
 						animate={{ opacity: 1, filter: "blur(0px)", scale: 1 }}
 						exit={{ opacity: 0, filter: "blur(10px)", scale: 0.95 }}
 						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-2 absolute -bottom-12 right-0"
+						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
 					>
 						<Button
 							variant="link"
 							size="lg"
-							className="text-white/80 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
 							onClick={handleNext}
 						>
 							Save & Continue
@@ -79,12 +79,12 @@ export function BioForm() {
 						animate={{ opacity: 1, filter: "blur(0px)" }}
 						exit={{ opacity: 0, filter: "blur(5px)" }}
 						transition={{ duration: 0.2, ease: "easeOut" }}
-						className="flex justify-end mt-2 absolute -bottom-12 right-0"
+						className="flex justify-end mt-4 md:mt-2 md:absolute md:-bottom-12 md:right-0"
 					>
 						<Button
 							variant="link"
 							size="lg"
-							className="text-white/80 font-medium! text-lg underline w-fit px-0! cursor-pointer"
+							className="text-white/80 font-medium! text-base md:text-lg underline w-fit px-0! cursor-pointer"
 							onClick={handleNext}
 						>
 							Skip For Now

apps/web/app/onboarding/intro.tsx

@@ -11,7 +11,7 @@ export function Intro() {
 
 	return (
 		<motion.div
-			className="flex flex-col gap-4 relative max-sm:text-4xl max-sm:w-full text-white text-center"
+			className="flex flex-col gap-4 relative text-2xl md:text-4xl w-full text-white text-center"
 			layout
 			transition={{
 				layout: { duration: 0.8, ease: "anticipate" },

apps/web/app/onboarding/name-form.tsx

@@ -1,11 +1,9 @@
 "use client"
 
-import { Button } from "@repo/ui/components/button"
 import { useOnboarding } from "./onboarding-context"
 import { useAuth } from "@lib/auth-context"
 import Link from "next/link"
 import { useEffect, useState } from "react"
-import { Input } from "@ui/components/input"
 import { CheckIcon } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import { NavMenu } from "./nav-menu"
@@ -20,8 +18,7 @@ export function NameForm() {
 		if (!name && user?.name) {
 			setName(user.name)
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [user?.name])
+	}, [name, user?.name])
 
 	function handleNext(): void {
 		const trimmed = name.trim()
@@ -51,13 +48,15 @@ export function NameForm() {
 	}
 
 	return (
-		<div className="flex flex-col gap-4">
+		<div className="flex flex-col gap-4 w-full">
 			<NavMenu>
 				<p className="text-base text-white/60">
 					Step {getStepNumberFor("name")} of {totalSteps}
 				</p>
 			</NavMenu>
-			<p className="text-4xl text-white font-medium">What should we call you?</p>
+			<p className="text-2xl md:text-4xl text-white font-medium">
+				What should we call you?
+			</p>
 
 			<form onSubmit={handleSubmit} className="flex flex-col group text-white">
 				<div className="relative flex flex-col">

apps/web/app/onboarding/onboarding-background.tsx

@@ -17,7 +17,7 @@ export function OnboardingBackground({ children }: OnboardingBackgroundProps) {
 		currentZoomStepIndex >= 0 ? 1.0 + currentZoomStepIndex * 0.1 : 1.0
 
 	return (
-		<div className="min-h-screen w-full overflow-x-hidden text-zinc-900 flex items-center justify-center relative">
+		<div className="min-h-screen w-full overflow-x-hidden text-zinc-900 flex items-center justify-center relative px-4 md:px-0">
 			<div
 				className="absolute inset-0 transition-transform duration-700 ease-in-out"
 				style={{
@@ -29,7 +29,7 @@ export function OnboardingBackground({ children }: OnboardingBackgroundProps) {
 					transformOrigin: "center bottom",
 				}}
 			/>
-			<div className="relative z-10">{children}</div>
+			<div className="relative z-10 w-full max-w-4xl mx-auto">{children}</div>
 		</div>
 	)
 }

apps/web/app/onboarding/onboarding-form.tsx

@@ -22,7 +22,7 @@ export function OnboardingForm() {
 	return (
 		<div
 			className={cn(
-				"text-4xl px-6 py-8 flex flex-col justify-center max-sm:w-full",
+				"text-2xl md:text-4xl px-4 md:px-6 py-6 md:py-8 flex flex-col justify-center w-full max-w-4xl mx-auto",
 				sans.variable,
 			)}
 		>

apps/web/app/onboarding/welcome.tsx

@@ -14,16 +14,18 @@ export function Welcome() {
 	}
 
 	return (
-		<div className="flex flex-col gap-4 items-center text-center">
-			<h1 className="text-white font-medium">Welcome to Supermemory</h1>
-			<p className="text-white/80 text-2xl">
+		<div className="flex flex-col gap-4 items-center text-center w-full">
+			<h1 className="text-white font-medium text-2xl md:text-4xl">
+				Welcome to Supermemory
+			</h1>
+			<p className="text-white/80 text-lg md:text-2xl">
 				We're excited to have you on board.
 			</p>
 
 			<button
 				type="button"
 				onClick={handleGetStarted}
-				className="tracking-normal w-fit flex items-center justify-center text-2xl underline cursor-pointer font-medium text-white/80 hover:text-white transition-colors"
+				className="tracking-normal w-fit flex items-center justify-center text-lg md:text-2xl underline cursor-pointer font-medium text-white/80 hover:text-white transition-colors"
 			>
 				Get started
 				<ArrowRightIcon className="size-4 ml-2" />

apps/web/components/chrome-extension-button.tsx

@@ -14,12 +14,14 @@ import { useEffect, useState } from "react"
 import { motion } from "framer-motion"
 import Image from "next/image"
 import { analytics } from "@/lib/analytics"
+import { useIsMobile } from "@hooks/use-mobile"
 
 export function ChromeExtensionButton() {
 	const [isExtensionInstalled, setIsExtensionInstalled] = useState(false)
 	const [isChecking, setIsChecking] = useState(true)
 	const [isDismissed, setIsDismissed] = useState(false)
 	const [isMinimized, setIsMinimized] = useState(false)
+	const isMobile = useIsMobile()
 
 	useEffect(() => {
 		const dismissed =
@@ -80,8 +82,8 @@ export function ChromeExtensionButton() {
 		setIsDismissed(true)
 	}
 
-	// Don't show if extension is installed, checking, or dismissed
-	if (isExtensionInstalled || isChecking || isDismissed) {
+	// Don't show if extension is installed, checking, dismissed, or on mobile
+	if (isExtensionInstalled || isChecking || isDismissed || isMobile) {
 		return null
 	}