From 618e4c12335b403a30211399e5fc8c4ddd9f9c28 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 11 Apr 2025 17:18:10 +0100
Subject: [PATCH] Update tutor header design

---
 src/components/AITutor/AITutorHeader.tsx          |  2 +-
 src/components/GenerateCourse/UserCoursesList.tsx | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/AITutor/AITutorHeader.tsx b/src/components/AITutor/AITutorHeader.tsx
index 77d7c881b..154a87865 100644
--- a/src/components/AITutor/AITutorHeader.tsx
+++ b/src/components/AITutor/AITutorHeader.tsx
@@ -21,7 +21,7 @@ export function AITutorHeader(props: AITutorHeaderProps) {
   return (
     <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
       <div className="flex items-center gap-2">
-        <h2 className="text-lg font-semibold">{title}</h2>
+        <h2 className="relative flex-shrink-0 top-0 lg:top-1 text-lg font-semibold">{title}</h2>
       </div>
 
       <div className="flex items-center gap-2">
diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx
index bef5f21cb..6a64f34ef 100644
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@@ -60,7 +60,16 @@ export function UserCoursesList() {
     }
   }, [pageState]);
 
-  if (!isInitialLoading && !isLoggedIn()) {
+  if (isUserAiCoursesLoading || isInitialLoading) {
+    return (
+      <AILoadingState
+        title="Loading your courses"
+        subtitle="This may take a moment..."
+      />
+    );
+  }
+
+  if (!isLoggedIn()) {
     return (
       <AITutorTallMessage
         title="Sign up or login"
@@ -105,7 +114,7 @@ export function UserCoursesList() {
 
       {!isUserAiCoursesLoading && !isInitialLoading && courses.length > 0 && (
         <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-3 gap-2">
+          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
             {courses.map((course) => (
               <AICourseCard key={course._id} course={course} />
             ))}