diff --git a/packages/ui/src/Popup/PopupMenu.tsx b/packages/ui/src/Popup/PopupMenu.tsx
index 03ecd2d1f..26a5603b1 100644
--- a/packages/ui/src/Popup/PopupMenu.tsx
+++ b/packages/ui/src/Popup/PopupMenu.tsx
@@ -47,6 +47,8 @@ export const PopupMenu: FC<PopupMenuProperties> = ({
     placement: position,
   });
 
+  const referenceElementWidth = referenceElement?.getBoundingClientRect().width;
+
   return createPortal(
     <div
       className={`popup-menu ${className}`.trim()}
@@ -54,9 +56,8 @@ export const PopupMenu: FC<PopupMenuProperties> = ({
       style={{
         ...styles.popper,
         ...styles,
-        width: matchReferenceWidth
-          ? referenceElement?.getBoundingClientRect().width
-          : "auto",
+        width: matchReferenceWidth ? referenceElementWidth : "auto",
+        maxWidth: referenceElementWidth ? referenceElementWidth * 1.5 : "auto",
       }}
       onClick={toggle}
       {...attributes.popper}
diff --git a/packages/ui/src/assets/css/popup.css b/packages/ui/src/assets/css/popup.css
index dc18073b7..d1d7db6a2 100644
--- a/packages/ui/src/assets/css/popup.css
+++ b/packages/ui/src/assets/css/popup.css
@@ -15,6 +15,7 @@
   box-shadow: 1px 1px 5px 1px #cccccc;
   display: inline-block;
   margin-top: 4px;
+  min-width: 12rem;
   position: absolute;
   z-index: 1000;
 }
diff --git a/packages/ui/src/assets/css/tooltip.css b/packages/ui/src/assets/css/tooltip.css
index a5765974c..4d7b81c47 100644
--- a/packages/ui/src/assets/css/tooltip.css
+++ b/packages/ui/src/assets/css/tooltip.css
@@ -9,6 +9,7 @@
   color: var(--tooltip-color);
   padding: 0.25rem;
   position: absolute;
+  max-width: 20rem;
   z-index: 1100;
 }