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)