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

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)

Start with the StackBlitz reproduction and locate the AppScreen styles that set position and height. Reproduce the issue with Radix UI's Dropdown Menu opening, then verify that AppScreen remains visible and retains the intended viewport height when the menu changes document.body styling.