AppScreen's height calculated as 0 when used with Radix UI Dropdown Menu

[2wndrhs]

Description

When using Radix UI's Dropdown Menu inside the AppScreen component of stackflow, the AppScreen component's height is calculated as 0, causing it to become invisible.

Issue Reproduction

https://stackblitz.com/edit/stackflow-with-radix-ui-dropdown?file=src%2FMyAcitivity.tsx

Possible Causes

This issue seems to be related to the react-remove-scroll-bar library used internally by the Radix UI Dropdown Menu. When the dropdown opens, it adds position: relative to the document.body.

• https://github.com/theKashey/react-remove-scroll-bar/blob/master/src/component.tsx#L30

  body[${lockAttribute}] {
    ...
    ${[
      allowRelative && `position: relative ${important};`,
      ...
    ]
      .filter(Boolean)
      .join('')}
  }

Since the AppScreen component has position: absolute and height: 100% styles, its height is calculated relative to the body (now position: relative), resulting in height of 0.

Suggested Solution

If the reason for using height: 100% is to set the height relative to the Initial Containing Block (ViewPort), assuming there's no positioned ancestor for AppScreen component, then replacing height: 100% with height: 100vh might solve the problem.

If dynamic changes to vh (due to address bars on mobile browsers) are a concern, using newer CSS units like lvh, svh, or dvh could be a suitable alternative. (https://stackoverflow.com/a/72245072/4773272)

[SEOKKAMONI]

useLayoutEffect(() => {
    if (open) {
      document.body.style.height = `${window.innerHeight}px`;
    } else {
      document.body.style.height = "";
    }
  }, [open]);

I experienced the same issue and resolved it using the code above. It may not be the best solution, but I’m sharing it for reference in case other developers run into the same problem.