diff --git a/apps/desktop/src/components/find-bar.tsx b/apps/desktop/src/components/find-bar.tsx index d988a53486..5851fc74ed 100644 --- a/apps/desktop/src/components/find-bar.tsx +++ b/apps/desktop/src/components/find-bar.tsx @@ -38,6 +38,7 @@ export function FindBar() { const { active, query, matchOrdinal, matchCount } = useStore($findInPage) const inputRef = useRef(null) const [localQuery, setLocalQuery] = useState('') + const [filesPaneRight, setFilesPaneRight] = useState(null) const { pathname } = useLocation() // Navigating away (opening another session, a settings page, …) closes the @@ -67,6 +68,34 @@ export function FindBar() { return undefined }, [active]) + // The files pane (right sidebar, `aside[aria-label="Right sidebar"]`) is a + // floating right rail. The find bar is `fixed right-4` by default, which + // would cover the files pane's header + first rows when it is open. Measure + // the pane's live rect and park the bar just left of it instead. + useEffect(() => { + if (!active) { + setFilesPaneRight(null) + + return undefined + } + + const measure = () => { + const aside = document.querySelector('aside[aria-label="Right sidebar"]') + const rect = aside?.getBoundingClientRect() + + if (rect && rect.width > 0 && rect.left < window.innerWidth) { + setFilesPaneRight(window.innerWidth - rect.left) + } else { + setFilesPaneRight(null) + } + } + + measure() + window.addEventListener('resize', measure) + + return () => window.removeEventListener('resize', measure) + }, [active, pathname]) + // Subscribe to found-in-page results from the main process. Refcounted in // the store, so a remount (connection re-home) can't stack listeners; the // subscription is deliberately mount-scoped and NOT tied to `active` — @@ -162,6 +191,11 @@ export function FindBar() { const matchLabel = formatMatchLabel(query, matchOrdinal, matchCount) + const barStyle = + filesPaneRight != null + ? { right: `calc(${filesPaneRight}px + 0.75rem)` } + : undefined + return (