Responsive AI generation

src/components/GenerateCourse/AICourseOutlineHeader.tsx

@@ -19,11 +19,11 @@ export function AICourseOutlineHeader(props: AICourseOutlineHeaderProps) {
   return (
     <div
       className={cn(
-        'relative mb-1 flex items-start justify-between border-b border-gray-100 p-6 max-lg:hidden',
+        'relative mb-1 flex items-start justify-between border-b border-gray-100 p-6 max-lg:p-3',
         isLoading && 'striped-loader',
       )}
     >
-      <div>
+      <div className="max-lg:hidden">
         <h2 className="mb-1 text-balance text-2xl font-bold max-lg:text-lg max-lg:leading-tight">
           {course.title || 'Loading course ..'}
         </h2>
@@ -32,14 +32,15 @@ export function AICourseOutlineHeader(props: AICourseOutlineHeaderProps) {
         </p>
       </div>
 
-      <div className="absolute right-3 top-3 flex items-center gap-2">
+      <div className="absolute right-3 top-3 flex gap-2 max-lg:relative max-lg:right-0 max-lg:top-0 max-lg:w-full max-lg:flex-row-reverse max-lg:justify-between">
         {!isLoading && (
           <>
-            <div className="flex rounded-md border border-gray-200 bg-white p-0.5 mr-1">
+            <RegenerateOutline onRegenerateOutline={onRegenerateOutline} />
+            <div className="mr-1 flex rounded-lg border border-gray-200 bg-white p-0.5">
               <button
                 onClick={() => setViewMode('outline')}
                 className={cn(
-                  'flex items-center gap-1 rounded px-2 py-1 text-sm transition-colors',
+                  'flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors',
                   viewMode === 'outline'
                     ? 'bg-gray-200 text-gray-900'
                     : 'text-gray-500 hover:text-gray-900',
@@ -56,7 +57,7 @@ export function AICourseOutlineHeader(props: AICourseOutlineHeaderProps) {
               <button
                 onClick={() => setViewMode('roadmap')}
                 className={cn(
-                  'flex items-center gap-1 rounded px-2 py-1 text-sm transition-colors',
+                  'flex items-center gap-1 rounded-md px-2 py-1 text-sm transition-colors',
                   viewMode === 'roadmap'
                     ? 'bg-gray-200 text-gray-900'
                     : 'text-gray-500 hover:text-gray-900',
@@ -71,7 +72,6 @@ export function AICourseOutlineHeader(props: AICourseOutlineHeaderProps) {
                 <span>Map</span>
               </button>
             </div>
-            <RegenerateOutline onRegenerateOutline={onRegenerateOutline} />
           </>
         )}
       </div>

src/components/GenerateCourse/RegenerateOutline.tsx

@@ -40,17 +40,20 @@ export function RegenerateOutline(props: RegenerateOutlineProps) {
         />
       )}
 
-      <div ref={ref} className="flex items-center">
+      <div ref={ref} className="flex relative items-stretch">
         <button
-          className={cn('text-gray-400 hover:text-black', {
-            'text-black': isDropdownVisible,
-          })}
+          className={cn(
+            'rounded-md px-2.5 text-gray-400 hover:text-black',
+            {
+              'text-black': isDropdownVisible,
+            },
+          )}
           onClick={() => setIsDropdownVisible(!isDropdownVisible)}
         >
           <PenSquare className="text-current" size={16} strokeWidth={2.5} />
         </button>
         {isDropdownVisible && (
-          <div className="absolute right-0 top-full min-w-[170px] overflow-hidden rounded-md border border-gray-200 bg-white">
+          <div className="absolute right-0 top-full translate-y-1 min-w-[170px] overflow-hidden rounded-md border border-gray-200 bg-white shadow-md">
             <button
               onClick={() => {
                 onRegenerateOutline();