Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38: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 {
position: absolute;
z-index: 1000;
display: flex;
max-width: 400px;
padding: 2px;

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

@ -1,7 +1,7 @@
// Copyright 2024, Command Line Inc.
// 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 { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
import ReactDOM from "react-dom";
@ -141,6 +141,7 @@ const MenuComponent = memo(
</div>
{isOpen && (
<FloatingPortal>
<div
className={clsx("menu", className)}
ref={refs.setFloating}
@ -188,6 +189,7 @@ const MenuComponent = memo(
);
})}
</div>
</FloatingPortal>
)}
</>
);