Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-08 00:21:23 +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 { memo, useState } from "react";
import { Button } from "./button"; import { Button } from "./button";
import { Menu } from "./menu"; import { Menu } from "./menu";
import "./menubutton.less";
const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => { const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@ -13,8 +14,8 @@ const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps)
style={{ borderColor: isOpen ? "var(--accent-color)" : "transparent" }} style={{ borderColor: isOpen ? "var(--accent-color)" : "transparent" }}
title={title} title={title}
> >
{text} <div>{text}</div>
<i className="fa-sharp fa-solid fa-angle-down" style={{ marginLeft: 4 }}></i> <i className="fa-sharp fa-solid fa-angle-down"></i>
</Button> </Button>
</Menu> </Menu>
</div> </div>