From e7aa75fa9bfc340d57f94f11110fd35f8a141b21 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 27 May 2025 16:59:41 +0100
Subject: [PATCH] Fix persona form

---
 src/components/RoadmapAIChat/RoadmapAIChat.tsx |  3 +--
 src/components/UserPersona/ChatPersona.tsx     | 10 +++++-----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/RoadmapAIChat/RoadmapAIChat.tsx b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
index 9e491892e..45d3c9058 100644
--- a/src/components/RoadmapAIChat/RoadmapAIChat.tsx
+++ b/src/components/RoadmapAIChat/RoadmapAIChat.tsx
@@ -53,7 +53,6 @@ import {
   getTailwindScreenDimension,
   type TailwindScreenDimensions,
 } from '../../lib/is-mobile';
-import { UserPersonaForm } from '../UserPersona/UserPersonaForm';
 import { ChatPersona } from '../UserPersona/ChatPersona';
 import { userPersonaOptions } from '../../queries/user-persona';
 import { UpdatePersonaModal } from '../UserPersona/UpdatePersonaModal';
@@ -434,7 +433,7 @@ export function RoadmapAIChat(props: RoadmapAIChatProps) {
                     setActiveTab('chat');
                     setIsChatMobileVisible(true);
                   }}
-                  className="relative overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl hover:bg-stone-800"
+                  className="relative w-max overflow-hidden rounded-full bg-stone-900 px-4 py-2 text-center text-white shadow-2xl hover:bg-stone-800"
                 >
                   <span className="relative z-20 flex items-center gap-2 text-sm">
                     <Bot className="size-5 text-yellow-400" />
diff --git a/src/components/UserPersona/ChatPersona.tsx b/src/components/UserPersona/ChatPersona.tsx
index adaf8d971..a03176de8 100644
--- a/src/components/UserPersona/ChatPersona.tsx
+++ b/src/components/UserPersona/ChatPersona.tsx
@@ -42,15 +42,15 @@ export function ChatPersona(props: ChatPersonaProps) {
   const roadmapTitle = roadmap?.json.title ?? '';
 
   return (
-    <div className="relative mx-auto flex h-full max-w-[400px] grow flex-col justify-center p-4">
-      <div className="mb-8 text-center">
+    <div className="relative mx-auto flex h-auto px-4 sm:h-full max-w-[400px] grow flex-col justify-center p-4 sm:p-4 px-2">
+      <div className="mb-4 sm:mb-8 text-left sm:text-center">
         <img
           src="/images/gifs/wave.gif"
           alt="Wave"
-          className="mx-auto mb-5 h-24 w-24"
+          className="hidden sm:block mx-auto mb-3 sm:mb-5 h-16 sm:h-24 w-16 sm:w-24"
         />
-        <h2 className="text-xl font-semibold">Welcome to the AI Tutor</h2>
-        <p className="mt-1 text-sm text-balance text-gray-500">
+        <h2 className="text-lg sm:text-xl font-semibold">Welcome to the AI Tutor</h2>
+        <p className="mt-1 text-xs sm:text-sm text-balance text-gray-500 pr-8 sm:px-0">
           Before we start, answer these questions so we can help you better.
         </p>
       </div>