Popup Components Going Off When Full-Screen Mode Enabled

[HaithamLeo]

Description

Steps to Reproduce:

1. I wrapped my data editor component inside Fullscreen component.

const Fullscreen = ({ full, children }: FullscreenProps): JSX.Element => {
  const element = document.querySelector('#full-screen')

  if (full) {
    // make the element go to full-screen mode
    element?.requestFullscreen?.()
  } else {
    document.exitFullscreen?.()
  }

  return (
    <div id="full-screen">
      <DataEditor/>
    </div>
  )
}

3. Enable full-screen mode on the data grid.
4. Observe that some of the popup components, such as the data grid header menu, go off the screen and become inaccessible.

Expected Behavior: When enabling full-screen mode, all components, including popups and overlays, should remain visible and accessible within the full-screen view.

Actual Behavior: Certain popup components, such as the data grid header menu, disappear or go off the screen when full-screen mode is enabled, making it difficult to interact with them.

Additional Information: Upon further investigation, it appears that the popup components are located inside layers overlays and are not direct child components of the data editor. This might be causing the issue when entering full-screen mode.

Environment

• Operating System: Linux
• Browser: Google Chrome

[pzcfg]

It seems like this may need to be fixed in the layer library itself https://github.com/everweij/react-laag/issues/92