From e056fd951ad78c77931625dcdf1e8a8cd76c982c Mon Sep 17 00:00:00 2001
From: Gido Manders <gido.manders@42.nl>
Date: Tue, 12 Nov 2024 16:50:21 +0100
Subject: [PATCH] improvement: add ability to customize max width of Popover

The popover is default limited to a width of 350 pixels. Developers
should be able to customize the maximum width.

Added maxWidth property to Popover.
---
 src/core/Popover/Popover.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/core/Popover/Popover.tsx b/src/core/Popover/Popover.tsx
index 3b1ab0118..99dce9ae9 100644
--- a/src/core/Popover/Popover.tsx
+++ b/src/core/Popover/Popover.tsx
@@ -64,6 +64,11 @@ type Props = {
    * by the wrapping of the children inside the CustomTag.
    */
   style?: CSSProperties;
+
+  /**
+   * Optionally set the maximum width of the popover.
+   */
+  maxWidth?: number;
 };
 
 /**
@@ -79,7 +84,8 @@ export function Popover({
   className,
   isOpen,
   onClickOutside,
-  style
+  style,
+  maxWidth
 }: Props) {
   const Tag = tag;
 
@@ -90,9 +96,10 @@ export function Popover({
       className="border-0 tippy-popover"
       content={children}
       placement={placement}
-      offset={[ offset, distance ]}
+      offset={[offset, distance]}
       interactive={true}
       zIndex={1049} // One level below bootstrap's modal
+      maxWidth={maxWidth}
     >
       <Tag className={className} style={style} tabIndex={0} role="button">
         {target}