From c6355e9f624152526541d7ae50d1cec85635a372 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Mon, 9 Oct 2023 13:22:17 +0100
Subject: [PATCH] fix: remove content width toggle from popover (#17775)

---
 .../scenes/notebooks/Notebook/NotebookPopover.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

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 (
-        <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"