Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use FloatingPortal to position menu above all other contents (#1136)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-10-24 23:32:54 -07:00 committed by GitHub
parent 20d333f724
commit 34e4ffc429
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/element/menu.less
View File

@ -1,6 +1,5 @@
.menu { .menu {
position: absolute; position: absolute;
z-index: 1000;
display: flex; display: flex;
max-width: 400px; max-width: 400px;
padding: 2px; padding: 2px;

4
frontend/app/element/menu.tsx
View File

@ -1,7 +1,7 @@
// Copyright 2024, Command Line Inc. // Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0 // SPDX-License-Identifier: Apache-2.0
import { type Placement, useDismiss, useFloating, useInteractions } from "@floating-ui/react"; import { FloatingPortal, type Placement, useDismiss, useFloating, useInteractions } from "@floating-ui/react";
import clsx from "clsx"; import clsx from "clsx";
import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react"; import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
@ -141,6 +141,7 @@ const MenuComponent = memo(
</div> </div>
{isOpen && ( {isOpen && (
<FloatingPortal>
<div <div
className={clsx("menu", className)} className={clsx("menu", className)}
ref={refs.setFloating} ref={refs.setFloating}
@ -188,6 +189,7 @@ const MenuComponent = memo(
); );
})} })}
</div> </div>
</FloatingPortal>
)} )}
</> </>
); );