1

frontend/src/pages/Automation/AutomationPage.tsx

@@ -410,38 +410,19 @@ const AutomationPage: React.FC = () => {
       <PageMeta title="Content Automation | IGNY8" description="Automatically create and publish content on your schedule" />
       <PageHeader 
         title="Automation" 
-        description="Automatically create and publish content on your schedule"
+        description=""
         badge={{ icon: <BoltIcon />, color: 'teal' }}
         parent="Automation"
       />
       
       <div className="space-y-6">
         {/* Compact Ready-to-Run card (header) - absolutely centered in header */}
-        <div className="flex justify-center">
+       
-          <div className={`w-full max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
-            ${currentRun?.status === 'running' ? 'border-brand-500 bg-brand-50' : currentRun?.status === 'paused' ? 'border-warning-500 bg-warning-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-gray-300 bg-gray-50'}`}>
-            <div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
-              ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-brand-500 to-brand-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-warning-500 to-warning-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}>
-              {!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-sm font-semibold text-gray-900 dark:text-white truncate">
-                {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
-                {currentRun?.status === 'paused' && 'Paused'}
-                {!currentRun && totalPending > 0 && 'Ready to Run'}
-                {!currentRun && totalPending === 0 && 'No Items Pending'}
-              </div>
-              <div className="text-xs text-gray-600 dark:text-gray-400 truncate">
-                {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
-              </div>
-            </div>
-          </div>
-        </div>
 
         {/* Compact Schedule & Controls Panel */}
         {config && (
           <ComponentCard className="border-0 overflow-hidden rounded-2xl bg-gradient-to-br from-brand-600 to-brand-700">
-            <div className="flex flex-col lg:flex-row items-center lg:items-center justify-between gap-3 py-3 px-4">
+            <div className="flex flex-col lg:flex-row items-center lg:items-center justify-between gap-3">
               <div className="flex items-center gap-4 flex-wrap">
                 <div className="flex items-center gap-2">
                   {config.is_enabled ? (
@@ -473,6 +454,24 @@ const AutomationPage: React.FC = () => {
                   )}
                 </div>
               </div>
+          <div className={`max-w-sm rounded-lg border-2 p-2 transition-all flex items-center gap-3 shadow-sm
+            ${currentRun?.status === 'running' ? 'border-brand-500 bg-brand-50' : currentRun?.status === 'paused' ? 'border-warning-500 bg-warning-50' : totalPending > 0 ? 'border-success-500 bg-success-50' : 'border-gray-300 bg-gray-50'}`}>
+            <div className={`size-9 rounded-lg flex items-center justify-center flex-shrink-0
+              ${currentRun?.status === 'running' ? 'bg-gradient-to-br from-brand-500 to-brand-600' : currentRun?.status === 'paused' ? 'bg-gradient-to-br from-warning-500 to-warning-600' : totalPending > 0 ? 'bg-gradient-to-br from-success-500 to-success-600' : 'bg-gradient-to-br from-gray-400 to-gray-500'}`}>
+              {!currentRun && totalPending > 0 ? <CheckCircleIcon className="size-4 text-white" /> : currentRun?.status === 'running' ? <BoltIcon className="size-4 text-white" /> : currentRun?.status === 'paused' ? <ClockIcon className="size-4 text-white" /> : <BoltIcon className="size-4 text-white" />}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="text-sm font-semibold text-gray-900 dark:text-white truncate">
+                {currentRun?.status === 'running' && `Running - Stage ${currentRun.current_stage}/7`}
+                {currentRun?.status === 'paused' && 'Paused'}
+                {!currentRun && totalPending > 0 && 'Ready to Run'}
+                {!currentRun && totalPending === 0 && 'No Items Pending'}
+              </div>
+              <div className="text-xs text-gray-600 dark:text-gray-400 truncate">
+                {currentRun ? `Started: ${new Date(currentRun.started_at).toLocaleTimeString()}` : (totalPending > 0 ? `${totalPending} items in pipeline` : 'All stages clear')}
+              </div>
+            </div>
+          </div>
               <div className="flex items-center gap-2">
                 <Button
                   onClick={() => setShowConfigModal(true)}