diff --git a/apps/client/src/widgets/FloatingButtons.css b/apps/client/src/widgets/FloatingButtons.css
index dbed6bdf7..46ed6dd80 100644
--- a/apps/client/src/widgets/FloatingButtons.css
+++ b/apps/client/src/widgets/FloatingButtons.css
@@ -6,11 +6,12 @@
 .floating-buttons-children,
 .show-floating-buttons {
     position: absolute;
-    top: calc(var(--floating-buttons-vert-offset, 14px) + var(--ribbon-height, 0));
+    top: calc(var(--floating-buttons-vert-offset, 14px) + var(--ribbon-height, 0px) + var(--content-header-height, 0px));
     inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
     display: flex;
     flex-direction: row;
     z-index: 100;
+    transition: top 0.3s ease;
 }
 
 .note-split.rtl .floating-buttons-children,
diff --git a/apps/client/src/widgets/containers/content_header.ts b/apps/client/src/widgets/containers/content_header.ts
index 96b9ba5b8..0bfdd8b3e 100644
--- a/apps/client/src/widgets/containers/content_header.ts
+++ b/apps/client/src/widgets/containers/content_header.ts
@@ -59,14 +59,13 @@ export default class ContentHeader extends Container<BasicWidget> {
         if (shouldFloat !== this.isFloating) {
             this.isFloating = shouldFloat;
 
+            const parentEl = this.parentElement?.closest<HTMLDivElement>(".note-split");
             if (shouldFloat) {
                 this.$widget.addClass("floating");
-                // Set CSS variable so ribbon can position itself below the floating header
-                this.parentElement!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
+                parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
             } else {
                 this.$widget.removeClass("floating");
-                // Reset CSS variable when header is not floating
-                this.parentElement!.style.removeProperty("--content-header-height");
+                parentEl!.style.removeProperty("--content-header-height");
             }
         }
     }