From 4641d7453623b51c8ceea685e62ac176ae5dc37b Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Thu, 4 Jun 2026 16:04:14 -0400
Subject: [PATCH] fix(welcome): make WelcomeScreen support isCompact prop to
 prevent full-screen CSS clash when rendering inside saved-ID wrapper card in
 App.tsx

Per PLAN item 8. Saved users now get a clean compact welcome prompt without double min-h-screen divs.
---
 frontend/src/App.tsx                      |   4 +-
 frontend/src/components/WelcomeScreen.tsx | 104 ++++++++++++----------
 2 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2a05fd8..edac050 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -80,7 +80,7 @@ export default function App() {
   if (!identified && !loadingPrefs) {
     const savedId = localStorage.getItem('kira-user-id');
     if (!savedId) {
-      return <WelcomeScreen onComplete={handleWelcome} />;
+      return <WelcomeScreen onComplete={handleWelcome} isCompact />;
     }
     // Has saved ID but not identified yet — show welcome with their name
     return (
@@ -92,7 +92,7 @@ export default function App() {
             </div>
           </div>
           <p className="text-kira-plum/60 text-sm">coming back? say your name to pick up where you left off</p>
-          <WelcomeScreen onComplete={handleWelcome} />
+          <WelcomeScreen onComplete={handleWelcome} isCompact />
         </div>
         <style>{`
           @keyframes pulse-glow {
diff --git a/frontend/src/components/WelcomeScreen.tsx b/frontend/src/components/WelcomeScreen.tsx
index 93a5da3..c0d6a6b 100644
--- a/frontend/src/components/WelcomeScreen.tsx
+++ b/frontend/src/components/WelcomeScreen.tsx
@@ -2,9 +2,10 @@ import { useState } from 'react';
 
 interface Props {
   onComplete: (name: string) => void;
+  isCompact?: boolean;
 }
 
-export default function WelcomeScreen({ onComplete }: Props) {
+export default function WelcomeScreen({ onComplete, isCompact = false }: Props) {
   const [name, setName] = useState('');
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -13,56 +14,69 @@ export default function WelcomeScreen({ onComplete }: Props) {
     if (trimmed) onComplete(trimmed);
   };
 
-  return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
-      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
-        {/* Avatar preview */}
-        <div className="flex justify-center">
-          <div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
-            <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
-              <span className="text-3xl">🌸</span>
-            </div>
+  const content = (
+    <>
+      {/* Avatar preview */}
+      <div className="flex justify-center">
+        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-kira-pink via-kira-lav to-kira-mint p-1 animate-pulse-glow">
+          <div className="w-full h-full rounded-full bg-white flex items-center justify-center">
+            <span className="text-3xl">🌸</span>
           </div>
         </div>
+      </div>
 
-        <div className="space-y-2">
-          <h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
-          <p className="text-sm text-kira-violet/60 leading-relaxed">
-            I'm your focus bestie. I'm here to body-double with you — 
-            keep you company, cheer you on, and help you get things done. 
-            Lo-fi beats, timers, cats, the whole deal.
-          </p>
-        </div>
-
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
-              What should I call you?
-            </label>
-            <input
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Your name..."
-              className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
-              autoFocus
-              maxLength={30}
-            />
-          </div>
-
-          <button
-            type="submit"
-            disabled={!name.trim()}
-            className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
-          >
-            Let's Go! ✨
-          </button>
-        </form>
-
-        <p className="text-[10px] text-kira-plum/30">
-          everything stays between us — your name, your preferences, your focus vibes
+      <div className="space-y-2">
+        <h1 className="text-2xl font-extrabold text-kira-plum">Welcome to Kira!</h1>
+        <p className="text-sm text-kira-violet/60 leading-relaxed">
+          I'm your focus bestie. I'm here to body-double with you — 
+          keep you company, cheer you on, and help you get things done. 
+          Lo-fi beats, timers, cats, the whole deal.
         </p>
       </div>
 
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <div>
+          <label className="block text-sm font-semibold text-kira-plum/70 mb-1.5 text-left">
+            What should I call you?
+          </label>
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Your name..."
+            className="w-full bg-white/60 rounded-xl px-4 py-3 text-sm text-kira-plum placeholder-kira-plum/30 border border-kira-pink/20 focus:outline-none focus:border-kira-pink/50 transition-all"
+            autoFocus
+            maxLength={30}
+          />
+        </div>
+
+        <button
+          type="submit"
+          disabled={!name.trim()}
+          className="btn-kira w-full py-3 text-base disabled:opacity-40 disabled:cursor-not-allowed transition-all"
+        >
+          Let's Go! ✨
+        </button>
+      </form>
+
+      <p className="text-[10px] text-kira-plum/30">
+        everything stays between us — your name, your preferences, your focus vibes
+      </p>
+    </>
+  );
+
+  if (isCompact) {
+    return (
+      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+        {content}
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-kira-bg via-kira-glow to-kira-pink/20 p-4">
+      <div className="glass-card max-w-md w-full p-8 text-center space-y-6">
+        {content}
+      </div>
       <style>{`
         @keyframes pulse-glow {
           0%, 100% { box-shadow: 0 0 12px rgba(255,182,193,0.3); }