gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-12 18:34:24 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

fix(client/floating_buttons): clipped by floating content header

Browse Source
This commit is contained in:
Elian Doran 2025-12-09 11:08:28 +02:00
parent d5d2815bdf
commit 5770222304
No known key found for this signature in database
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/widgets/FloatingButtons.css
View File

@ -6,11 +6,12 @@
.floating-buttons-children, .floating-buttons-children,
.show-floating-buttons { .show-floating-buttons {
position: absolute; 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); inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 100; z-index: 100;
transition: top 0.3s ease;
} }
.note-split.rtl .floating-buttons-children, .note-split.rtl .floating-buttons-children,

7
apps/client/src/widgets/containers/content_header.ts
View File

@ -59,14 +59,13 @@ export default class ContentHeader extends Container<BasicWidget> {
if (shouldFloat !== this.isFloating) { if (shouldFloat !== this.isFloating) {
this.isFloating = shouldFloat; this.isFloating = shouldFloat;
const parentEl = this.parentElement?.closest<HTMLDivElement>(".note-split");
if (shouldFloat) { if (shouldFloat) {
this.$widget.addClass("floating"); this.$widget.addClass("floating");
// Set CSS variable so ribbon can position itself below the floating header parentEl!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
this.parentElement!.style.setProperty("--content-header-height", `${this.currentHeight}px`);
} else { } else {
this.$widget.removeClass("floating"); this.$widget.removeClass("floating");
// Reset CSS variable when header is not floating parentEl!.style.removeProperty("--content-header-height");
this.parentElement!.style.removeProperty("--content-header-height");
} }
} }
} }