fix: cron layout

components/cron/CronEditor.tsx

@@ -123,7 +123,7 @@ export function CronEditor() {
   const fields      = useMemo(() => splitCronFields(expression), [expression]);
   const description = useMemo(() => describeCronExpression(expression), [expression]);
   const schedule    = useMemo(
-    () => (isValid ? getNextOccurrences(expression, 10) : []),
+    () => (isValid ? getNextOccurrences(expression, 7) : []),
     [expression, isValid],
   );
 
@@ -257,17 +257,19 @@ export function CronEditor() {
   );
 
   return (
-    <div className="flex flex-col gap-4 animate-fade-in">
+    <div className="flex flex-col gap-4">
 
-      {/* ── Mobile tabs ─────────────────────────────────────────────────── */}
       <MobileTabs
         tabs={[{ value: 'editor', label: 'Editor' }, { value: 'preview', label: 'Preview' }]}
         active={mobileTab}
         onChange={(v) => setMobileTab(v as 'editor' | 'preview')}
       />
 
-      {/* ── Main content ────────────────────────────────────────────────── */}
+      {/* Main layout — side-by-side on lg, tabbed on mobile */}
-      <div className="grid lg:grid-cols-5 gap-4">
+      <div
+        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
+        style={{ height: 'calc(100svh - 120px)'  }}
+      >
 
         {/* Left: Field editor + Presets ──────────────────────────────── */}
         <div className={cn(
@@ -293,7 +295,7 @@ export function CronEditor() {
           </div>
 
           {/* Field editor panel */}
-          <div className="glass rounded-xl p-5 border border-border/40">
+          <div className="glass rounded-xl p-5 border border-border/40 flex-1 min-h-0 overflow-hidden">
             {fields ? (
               <CronFieldEditor
                 fieldType={activeField}
@@ -306,8 +308,26 @@ export function CronEditor() {
               </p>
             )}
           </div>
+        </div>
 
-          {/* Saved history */}
+        {/* Right: Expression bar + Schedule preview ───────────────────── */}
+        <div className={cn(
+          'lg:col-span-2 flex flex-col gap-4',
+          mobileTab === 'editor' && 'hidden lg:flex',
+        )}>
+          {expressionBar}
+
+          <div className="glass rounded-xl p-4 border border-border/40  flex-1 min-h-0 overflow-hidden">
+            <div className="flex items-center gap-2 mb-3">
+              <Clock className="w-3.5 h-3.5 text-muted-foreground/40" />
+              <span className="text-[9px] font-mono text-muted-foreground/50 uppercase tracking-widest">
+                Next Occurrences
+              </span>
+            </div>
+            <ScheduleList schedule={schedule} isValid={isValid} />
+          </div>
+
+                    {/* Saved history */}
           {history.length > 0 && (
             <div className="glass rounded-xl p-4 border border-border/40">
               <div className="flex items-center justify-between mb-3">
@@ -346,24 +366,6 @@ export function CronEditor() {
           )}
         </div>
 
-        {/* Right: Expression bar + Schedule preview ───────────────────── */}
-        <div className={cn(
-          'lg:col-span-2 flex flex-col gap-4',
-          mobileTab === 'editor' && 'hidden lg:flex',
-        )}>
-          {expressionBar}
-
-          <div className="glass rounded-xl p-4 border border-border/40">
-            <div className="flex items-center gap-2 mb-3">
-              <Clock className="w-3.5 h-3.5 text-muted-foreground/40" />
-              <span className="text-[9px] font-mono text-muted-foreground/50 uppercase tracking-widest">
-                Next Occurrences
-              </span>
-            </div>
-            <ScheduleList schedule={schedule} isValid={isValid} />
-          </div>
-        </div>
-
       </div>
     </div>
   );