From 884ca58e7133f9633875d5bdcdff40377a2fb38e Mon Sep 17 00:00:00 2001 From: Wieland Lindenthal Date: Mon, 8 Jun 2026 16:08:00 +0200 Subject: [PATCH] Fix vertical content jumps in the BlockNote editor on selection MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BlockNote 0.51 puts the className we pass to (`block-note-editor-container`) onto BOTH the outer `.bn-container` wrapper AND an inner wrapper that does NOT carry `.bn-container`. With the previous selector matching by class name alone, every rule cascaded onto both nesting levels — most importantly `display: flex`, `flex-direction: column-reverse` and `gap: 10px`. Two flex layouts stacked one inside the other meant that whenever the side menu / drag handle plugin views re-rendered (which happens every time the selection moves or the mouse leaves the editor), both layout calcs ran and the inner wrapper's gap shifted the visible content by a few pixels. Tightening the selector to `.block-note-editor-container.bn-container` restricts the rules to the outer wrapper only; the inner wrapper falls back to defaults (`display: block`, no gap) and stops contributing to the layout. Refs https://community.openproject.org/wp/STC-779 Co-Authored-By: Claude Opus 4.7 --- modules/documents/app/assets/stylesheets/_index.sass | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/modules/documents/app/assets/stylesheets/_index.sass b/modules/documents/app/assets/stylesheets/_index.sass index 3e7befa4d95..a64c9b5be8a 100644 --- a/modules/documents/app/assets/stylesheets/_index.sass +++ b/modules/documents/app/assets/stylesheets/_index.sass @@ -4,7 +4,14 @@ $blocknote-max-width: 800px .ck-content min-height: 30vh -.block-note-editor-container +// BlockNote 0.51 stamps `.block-note-editor-container` (the className we +// pass to ) onto BOTH its outer `.bn-container` wrapper AND +// an inner wrapper without `.bn-container`. Without the `.bn-container` +// requirement, the rules below cascade onto both elements — `gap: 10px` +// and `flex-direction: column-reverse` get applied at two nesting levels, +// which shows up as a few-pixel vertical layout jump whenever the side +// menu / drag handle re-renders during selection. +.block-note-editor-container.bn-container align-items: center position: relative display: flex