chore: only show links container toggle if container can be truncated (#2326)

packages/web/src/javascripts/Components/LinkedItems/LinkedItemBubblesContainer.tsx

@@ -2,7 +2,7 @@ import { observer } from 'mobx-react-lite'
 import ItemLinkAutocompleteInput from './ItemLinkAutocompleteInput'
 import { LinkingController } from '@/Controllers/LinkingController'
 import LinkedItemBubble from './LinkedItemBubble'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useResponsiveAppPane } from '../Panes/ResponsivePaneProvider'
 import { ElementIds } from '@/Constants/ElementIDs'
 import { classNames } from '@standardnotes/utils'
@@ -112,6 +112,34 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
   const visibleItems = isCollapsed ? itemsToDisplay.slice(0, 5) : itemsToDisplay
   const nonVisibleItems = itemsToDisplay.length - visibleItems.length
 
+  const [canShowContainerToggle, setCanShowContainerToggle] = useState(false)
+  const linkInputRef = useRef<HTMLInputElement>(null)
+  const linkContainerRef = useRef<HTMLDivElement>(null)
+  useEffect(() => {
+    const container = linkContainerRef.current
+    const linkInput = linkInputRef.current
+
+    if (!container || !linkInput) {
+      return
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (container.clientHeight > linkInput.clientHeight) {
+        setCanShowContainerToggle(true)
+      } else {
+        setCanShowContainerToggle(false)
+      }
+    })
+
+    resizeObserver.observe(linkContainerRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+
+  const shouldHideToggle = hideToggle || (!canShowContainerToggle && !isCollapsed)
+
   return (
     <div
       className={classNames(
@@ -126,6 +154,7 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
           allItemsLinkedToItem.length || notesLinkingToItem.length ? 'mt-1' : 'mt-0.5',
           isCollapsed ? 'overflow-hidden' : 'flex-wrap',
         )}
+        ref={linkContainerRef}
       >
         {visibleItems.map((link) => (
           <LinkedItemBubble
@@ -148,9 +177,10 @@ const LinkedItemBubblesContainer = ({ item, linkingController, hideToggle = fals
           setFocusedId={setFocusedId}
           hoverLabel={`Focus input to add a link (${shortcut})`}
           item={item}
+          ref={linkInputRef}
         />
       </div>
-      {itemsToDisplay.length > 0 && !hideToggle && (
+      {itemsToDisplay.length > 0 && !shouldHideToggle && (
         <RoundIconButton
           id="toggle-linking-container"
           label="Toggle linked items container"