diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx index 1e63357eb209a..aed37034404a6 100644 --- a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx +++ b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx @@ -5,7 +5,7 @@ import { Notebook } from './Notebook' import { notebookPopoverLogic } from 'scenes/notebooks/Notebook/notebookPopoverLogic' import { LemonButton } from '@posthog/lemon-ui' import { IconFullScreen, IconChevronRight, IconLink } from 'lib/lemon-ui/icons' -import { useEffect, useRef } from 'react' +import { useEffect, useMemo, useRef } from 'react' import { useKeyboardHotkeys } from 'lib/hooks/useKeyboardHotkeys' import { NotebookListMini } from './NotebookListMini' import { notebooksModel } from '~/models/notebooksModel' @@ -13,6 +13,7 @@ import { NotebookExpandButton, NotebookSyncInfo } from './NotebookMeta' import { notebookLogic } from './notebookLogic' import { urls } from 'scenes/urls' import { NotebookPopoverDropzone } from './NotebookPopoverDropzone' +import { useResizeBreakpoints } from 'lib/hooks/useResizeObserver' export function NotebookPopoverCard(): JSX.Element | null { const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, droppedResource } = @@ -26,8 +27,16 @@ export function NotebookPopoverCard(): JSX.Element | null { if (droppedResource) { return null } + + const { ref, size } = useResizeBreakpoints({ + 0: 'small', + 832: 'medium', + }) + + const contentWidthHasEffect = useMemo(() => fullScreen && size === 'medium', [fullScreen, size]) + return ( -