fix: remove content width toggle from popover (#17775)

PostHog · Oct 9, 2023 · c6355e9 · c6355e9
1 parent aade1e4
commit c6355e9
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
@@ -5,14 +5,15 @@ 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'
 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 (
-        <div className="NotebookPopover__content__card">
+        <div ref={ref} className="NotebookPopover__content__card">
             <header className="flex items-center justify-between gap-2 font-semibold shrink-0 p-1 border-b">
                 <span className="flex items-center gap-1 text-primary-alt">
                     <NotebookListMini
@@ -49,7 +58,7 @@ export function NotebookPopoverCard(): JSX.Element | null {
                         tooltipPlacement="left"
                     />
 
-                    <NotebookExpandButton status="primary-alt" size="small" />
+                    {contentWidthHasEffect && <NotebookExpandButton status="primary-alt" size="small" />}
 
                     <LemonButton
                         size="small"