From ff2a3d6a28c2f8364238a974e52d0553996ae7fb Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Tue, 3 Feb 2026 02:56:46 +0200
Subject: [PATCH] client/search: fix menu dropdowns getting clipped

---
 apps/client/src/widgets/react/Collapsible.css |  4 ++++
 apps/client/src/widgets/react/Collapsible.tsx | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/react/Collapsible.css b/apps/client/src/widgets/react/Collapsible.css
index 7dca2f5651..a3222d20a8 100644
--- a/apps/client/src/widgets/react/Collapsible.css
+++ b/apps/client/src/widgets/react/Collapsible.css
@@ -17,6 +17,10 @@
     .collapsible-body {
         height: 0;
         overflow: hidden;
+
+        &.fully-expanded {
+            overflow: visible;
+        }
     }
 
     .collapsible-inner-body {
diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx
index a6e1957b34..212de203dc 100644
--- a/apps/client/src/widgets/react/Collapsible.tsx
+++ b/apps/client/src/widgets/react/Collapsible.tsx
@@ -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}
             >