diff --git a/frontend/app/element/menubutton.less b/frontend/app/element/menubutton.less
new file mode 100644
index 000000000..e74601aa4
--- /dev/null
+++ b/frontend/app/element/menubutton.less
@@ -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;
+            }
+        }
+    }
+}
diff --git a/frontend/app/element/menubutton.tsx b/frontend/app/element/menubutton.tsx
index f0cb5e383..95cf4bba0 100644
--- a/frontend/app/element/menubutton.tsx
+++ b/frontend/app/element/menubutton.tsx
@@ -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>