gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-07 22:34:24 +01:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

client/search: fix menu dropdowns getting clipped

Browse Source
This commit is contained in:
Adorian Doran 2026-02-03 02:56:46 +02:00
parent 2c74697fb1
commit ff2a3d6a28
2 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/client/src/widgets/react/Collapsible.css
View File

@ -17,6 +17,10 @@
.collapsible-body {
height: 0;
overflow: hidden;
&.fully-expanded {
overflow: visible;
}
}
.collapsible-inner-body {

18
apps/client/src/widgets/react/Collapsible.tsx
View File

@ -27,6 +27,7 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
const { height } = useElementSize(innerRef) ?? {};
const contentId = useUniqueName();
const [ transitionEnabled, setTransitionEnabled ] = useState(false);
const [ fullyExpanded, setFullyExpanded ] = useState(false);
useEffect(() => {
const timeout = setTimeout(() => {
@ -35,6 +36,21 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
return () => clearTimeout(timeout);
}, []);
useEffect(() => {
if (expanded) {
if (transitionEnabled) {
const timeout = setTimeout(() => {
setFullyExpanded(true);
}, 250);
return () => clearTimeout(timeout);
} else {
setFullyExpanded(true);
}
} else {
setFullyExpanded(false);
}
}, [expanded, transitionEnabled])
return (
<div className={clsx("collapsible", className, {
expanded,
@ -53,7 +69,7 @@ export function ExternallyControlledCollapsible({ title, children, className, ex
<div
id={contentId}
ref={bodyRef}
className="collapsible-body"
className={clsx("collapsible-body", {"fully-expanded": fullyExpanded})}
style={{ height: expanded ? height : "0" }}
aria-hidden={!expanded}
>