From bad2e46c881665e374cdc2b5d8a19f59738b88ce Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 11:07:42 +0545
Subject: [PATCH 1/2] refactor: set max width and min width to popup menu

---
 packages/ui/src/Popup/PopupMenu.tsx  | 7 ++++---
 packages/ui/src/assets/css/popup.css | 1 +
 2 files changed, 5 insertions(+), 3 deletions(-)

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;
 }

From 9bd338dfc6470518e72f5a5f5c24c1d8ebf11967 Mon Sep 17 00:00:00 2001
From: Bishal Shrestha <bishal.shrestha@dzangolab.com>
Date: Tue, 15 Jul 2025 11:17:52 +0545
Subject: [PATCH 2/2] refactor: set max width for tooltip container

---
 packages/ui/src/assets/css/tooltip.css | 1 +
 1 file changed, 1 insertion(+)

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;
 }