Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-01 23:21:59 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make menubutton text clip to avoid overflow (#1135)

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

15
frontend/app/element/menubutton.less Normal file
View File

@ -0,0 +1,15 @@
.menubutton {
overflow: hidden;
.menu-anchor {
width: 100%;
.button {
width: 100%;
div {
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
flex-shrink: 1;
}
}
}
}

5
frontend/app/element/menubutton.tsx
View File

@ -2,6 +2,7 @@ import clsx from "clsx";
import { memo, useState } from "react";
import { Button } from "./button";
import { Menu } from "./menu";
import "./menubutton.less";
const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
const [isOpen, setIsOpen] = useState(false);
@ -13,8 +14,8 @@ const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps)
style={{ borderColor: isOpen ? "var(--accent-color)" : "transparent" }}
title={title}
>
{text}
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i>
<div>{text}</div>
<i className="fa-sharp fa-solid fa-angle-down"></i>
</Button>
</Menu>
</div>