Improve spacing

src/components/GenerateCourse/AICourseContent.tsx

@@ -114,7 +114,7 @@ export function AICourseContent(props: AICourseContentProps) {
 
   return (
     <section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50">
-      <div className="bg-gray-100 border-b border-gray-200">
+      <div className="border-b border-gray-200 bg-gray-100">
         <div className="flex items-center px-4 py-2">
           <a
             href="/ai-tutor"
@@ -139,7 +139,9 @@ export function AICourseContent(props: AICourseContentProps) {
               {finishedPercentage > 0 && (
                 <>
                   <span className="text-gray-400">•</span>
-                  <span className="font-medium text-green-600">{finishedPercentage}% complete</span>
+                  <span className="font-medium text-green-600">
+                    {finishedPercentage}% complete
+                  </span>
                 </>
               )}
             </div>
@@ -178,7 +180,7 @@ export function AICourseContent(props: AICourseContentProps) {
         >
           <div
             className={cn(
-              'relative mb-2 flex min-h-[40px] items-center border-b border-gray-200 px-3',
+              'relative flex min-h-[40px] items-center justify-between border-b border-gray-200 px-3',
               isLoading && 'striped-loader bg-gray-50',
             )}
           >

src/components/GenerateCourse/AICourseModuleList.tsx

@@ -74,7 +74,7 @@ export function AICourseModuleList(props: AICourseModuleListProps) {
   const { done = [] } = aiCourseProgress || {};
 
   return (
-    <nav className="space-y-1 px-2">
+    <nav className="space-y-1 py-2 px-2">
       {course.modules.map((module, moduleIdx) => {
         const totalLessons = module.lessons.length;
         const completedLessons = module.lessons.filter((lesson) => {
@@ -143,18 +143,14 @@ export function AICourseModuleList(props: AICourseModuleListProps) {
                       onClick={() => {
                         setActiveModuleIndex(moduleIdx);
                         setActiveLessonIndex(lessonIdx);
-                        // Expand only this module in the sidebar
                         setExpandedModules((prev) => {
                           const newState: Record<number, boolean> = {};
-                          // Set all modules to collapsed
                           course.modules.forEach((_, idx) => {
                             newState[idx] = false;
                           });
-                          // Expand only the current module
                           newState[moduleIdx] = true;
                           return newState;
                         });
-                        // Ensure sidebar is visible on mobile
                         setSidebarOpen(true);
                         setViewMode('module');
                       }}