diff --git a/components/cron/CronEditor.tsx b/components/cron/CronEditor.tsx
index 5213682..80e92c4 100644
--- a/components/cron/CronEditor.tsx
+++ b/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 ────────────────────────────────────────────────── */}
-      <div className="grid lg:grid-cols-5 gap-4">
+      {/* Main layout — side-by-side on lg, tabbed on mobile */}
+      <div
+        className="grid grid-cols-1 lg:grid-cols-5 gap-4"
+        style={{ height: 'calc(100svh - 120px)'  }}
+      >
 
         {/* Left: Field editor + Presets ──────────────────────────────── */}
         <div className={cn(