From 205f09838f508c5fbcd2868bc5ebafdf102669d7 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Thu, 9 Jul 2026 11:40:39 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20block=20editor=20visibility=20=E2=80=94?=
 =?UTF-8?q?=20flex=20layout=20+=20400ms=20init=20delay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- page-editor-wrapper: min-height:0 + display:flex column to prevent collapse
- blocks-container: flex:1 to fill remaining space
- init setTimeout: 200→400ms for reliable Alpine render
- Removed min-height:100% that caused overflow clipping
---
 app/templates/page_editor.html | 21 ++++++++-------------
 static/css/app.css             |  5 ++++-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html
index 95b4f5c..bb3b619 100644
--- a/app/templates/page_editor.html
+++ b/app/templates/page_editor.html
@@ -230,34 +230,29 @@ function editor(pid,title,fmt,raw){
 
       SlashMenu.init();
 
-      // Poll until DOM ready, then setup
-      let n=0;
-      const setup=()=>{
+      // Give Alpine time to render, then setup once
+      setTimeout(()=>{
         const ct=document.getElementById('_blocksCt');
-        if(!ct||!ct.querySelector('[data-bid]')){if(++n<60)requestAnimationFrame(setup);return;}
-
+        if(!ct)return;
         // Fill content
         for(const b of this.blocks){
           const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`);
           if(el&&b.type!=='divider')el.textContent=b.content||'';
         }
-        const b0=this.blocks[0];
-        if(b0){const f=ct.querySelector(`[data-bid="${b0.id}"]:not(button):not(input)`);if(f){f.focus();curEnd(f);}}
-
-        // === KEYDOWN (vanilla JS) ===
+        // Focus first block
+        this.focusBlock();
+        // KEYDOWN (vanilla JS)
         ct.addEventListener('keydown',e=>this.onKd(e,ct));
         ct.addEventListener('paste',e=>{e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();});
-
         // SortableJS
         if(typeof Sortable!=='undefined')Sortable.create(ct,{draggable:'.block-wrapper',handle:'.block-handle',animation:150,ghostClass:'sortable-ghost',dragClass:'sortable-drag',onEnd:evt=>{if(evt.oldIndex===evt.newIndex)return;const[item]=this.blocks.splice(evt.oldIndex,1);this.blocks.splice(evt.newIndex,0,item);this.dirty=true;this.autoSave();}});
-      };
-      requestAnimationFrame(setup);
+      },400);
     },
 
     mkB(type,content,extras){const b={id:genId(),type,content:content||'',...(extras||{})};if(type==='toggle')b.expanded=true;if(type==='to_do')b.checked=false;return b;},
 
     focusFirstBlock(){const b=this.blocks[0];if(b){const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}}},
-    focusBlock(){this.focusFirstBlock();},
+    focusBlock(n){n=n||0;const b=this.blocks[0];if(!b)return;const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}else if(n<10){setTimeout(()=>this.focusBlock(n+1),50);}},
     onCtClick(e){
       if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){
         if(!this.blocks.length)this.addAt(0);
diff --git a/static/css/app.css b/static/css/app.css
index 1cf9c65..1919329 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -1510,7 +1510,9 @@ input, select, textarea { font-family: inherit; color: inherit; }
   flex: 1;
   overflow-y: auto;
   padding: 0;
-  min-height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Page title area */
@@ -1558,6 +1560,7 @@ input, select, textarea { font-family: inherit; color: inherit; }
   max-width: 900px;
   margin: 0 auto;
   min-height: 300px;
+  flex: 1;
 }
 
 .blocks-empty {