Improve UI

src/components/AIRoadmap/AIRoadmapContent.tsx

@@ -15,7 +15,7 @@ export function AIRoadmapContent(props: AIRoadmapContentProps) {
   return (
     <div
       className={cn(
-        'relative mx-auto w-full max-w-4xl',
+        'relative mx-auto w-full max-w-7xl',
         isLoading && 'min-h-full',
       )}
     >

src/components/AIRoadmap/AIRoadmapRegenerate.tsx

@@ -208,6 +208,8 @@ export function AIRoadmapRegenerate(props: AIRoadmapRegenerateProps) {
               label="Modify Prompt"
             />
 
+            <hr className="my-1 border-gray-200" />
+
             <ActionButton
               onClick={saveAIRoadmap}
               icon={SaveIcon}

src/components/GenerateCourse/AICourseCard.tsx

@@ -46,15 +46,24 @@ export function AICourseCard(props: AICourseCardProps) {
       >
         {/* Title and difficulty section */}
         <div className="min-w-0 flex-1">
-          <div className="mb-1 flex items-center gap-2">
-            <span
-              className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
-            >
-              {course.difficulty}
-            </span>
-          </div>
+          {course.difficulty && (
+            <div className="mb-1 flex items-center gap-2">
+              <span
+                className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
+              >
+                {course.difficulty}
+              </span>
+            </div>
+          )}
 
-          <h3 className="line-clamp-2 text-base font-semibold text-balance text-gray-900">
+          <h3
+            className={cn(
+              'line-clamp-2 text-base font-semibold text-balance text-gray-900',
+              {
+                'max-w-[95%]': variant === 'column',
+              },
+            )}
+          >
             {course.title
               ?.replace(": A Beginner's Guide", '')
               ?.replace(' for beginners', '')

src/components/GenerateCourse/UserCoursesList.tsx

@@ -95,9 +95,9 @@ export function UserCoursesList() {
           </p>
 
           {isUserAuthenticated && !isAnyLoading && courses.length > 0 && (
-            <div className="flex flex-col gap-2">
+            <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 gap-2">
               {courses.map((course) => (
-                <AICourseCard key={course._id} course={course} />
+                <AICourseCard variant="column" key={course._id} course={course} />
               ))}
 
               <Pagination