From 5770222304e486171d45249e7335f15a2feff84d Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Tue, 9 Dec 2025 11:08:28 +0200 Subject: [PATCH] fix(client/floating_buttons): clipped by floating content header --- apps/client/src/widgets/FloatingButtons.css | 3 ++- apps/client/src/widgets/containers/content_header.ts | 7 +++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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 { if (shouldFloat !== this.isFloating) { this.isFloating = shouldFloat; + const parentEl = this.parentElement?.closest(".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"); } } }