From e9195b728ad2755a97c871846c7fd9f4a0d9b0d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 4 Mar 2026 11:41:05 +0100
Subject: [PATCH] fix: cron layout

---
 components/cron/CronEditor.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/components/cron/CronEditor.tsx b/components/cron/CronEditor.tsx
index 5213682..aee6e02 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(
@@ -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}
@@ -353,7 +355,7 @@ export function CronEditor() {
         )}>
           {expressionBar}
 
-          <div className="glass rounded-xl p-4 border border-border/40">
+          <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">