fix(ui): adds new sidebar provider to help address tooltip and popup positioning inside the sidebar

packages/ui/src/elements/AddNewRelation/index.tsx

@@ -10,13 +10,14 @@ import type { Props } from './types.js'
 
 import { PlusIcon } from '../../icons/Plus/index.js'
 import { useAuth } from '../../providers/Auth/index.js'
+import { useSidebar } from '../../providers/Sidebar/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { Button } from '../Button/index.js'
 import { useDocumentDrawer } from '../DocumentDrawer/index.js'
 import { Popup } from '../Popup/index.js'
 import * as PopupList from '../Popup/PopupButtonList/index.js'
-import { Tooltip } from '../Tooltip/index.js'
 import './index.scss'
+import { Tooltip } from '../Tooltip/index.js'
 import { useRelatedCollections } from './useRelatedCollections.js'
 
 const baseClass = 'relationship-add-new'
@@ -41,6 +42,10 @@ export const AddNewRelation: React.FC<Props> = ({
     !relatedToMany ? relatedCollections[0] : undefined,
   )
 
+  // If this field is in a sidebar we want to make sure it's using the sidebar ref for boundingRef in the Popup
+  // This helps us avoid any overflow related issues
+  const { ref: sidebarRef } = useSidebar()
+
   const [popupOpen, setPopupOpen] = useState(false)
   const { i18n, t } = useTranslation()
   const [showTooltip, setShowTooltip] = useState(false)
@@ -170,6 +175,7 @@ export const AddNewRelation: React.FC<Props> = ({
         {relatedCollections.length > 1 && (
           <Fragment>
             <Popup
+              boundingRef={sidebarRef}
               button={
                 ButtonFromProps ? (
                   ButtonFromProps

packages/ui/src/elements/DocumentFields/index.tsx

@@ -6,6 +6,7 @@ import React, { useMemo } from 'react'
 
 import { useFormInitializing, useFormProcessing } from '../../forms/Form/context.js'
 import { RenderFields } from '../../forms/RenderFields/index.js'
+import { SidebarProvider } from '../../providers/Sidebar/index.js'
 import { Gutter } from '../Gutter/index.js'
 import './index.scss'
 
@@ -90,7 +91,7 @@ export const DocumentFields: React.FC<Args> = ({
         </Gutter>
       </div>
       {hasSidebarFields ? (
-        <div className={`${baseClass}__sidebar-wrap`}>
+        <SidebarProvider className={`${baseClass}__sidebar-wrap`}>
           <div className={`${baseClass}__sidebar`}>
             <div className={`${baseClass}__sidebar-fields`}>
               <RenderFields
@@ -104,7 +105,7 @@ export const DocumentFields: React.FC<Args> = ({
               />
             </div>
           </div>
-        </div>
+        </SidebarProvider>
       ) : null}
     </div>
   )

packages/ui/src/providers/Sidebar/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React, { createContext, useContext, useRef } from 'react'
+
+export type Theme = 'dark' | 'light'
+
+export type SidebarContext = {
+  ref: React.RefObject<HTMLDivElement>
+}
+
+const initialContext: SidebarContext = {
+  ref: null,
+}
+
+const Context = createContext(initialContext)
+
+export const SidebarProvider: React.FC<{
+  children?: React.ReactNode
+  className?: string
+}> = ({ children, className }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  return (
+    <Context.Provider value={{ ref }}>
+      <div className={className} ref={ref}>
+        {children}
+      </div>
+    </Context.Provider>
+  )
+}
+
+export const useSidebar = (): SidebarContext => useContext(Context)