From 7f67bd524b2540b4eb667ad878d4da1b4558a76c Mon Sep 17 00:00:00 2001
From: Chris Mathevet <chris.mathevet@inLibro.com>
Date: Thu, 13 Aug 2026 11:51:48 -0400
Subject: [PATCH 1/2] Use create-portal function for modals

Ensure modals are rendered outside the component hierarchy to avoid stacking and z-index issues.
---
 apps/OpenSign/src/primitives/ModalUi.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/OpenSign/src/primitives/ModalUi.jsx b/apps/OpenSign/src/primitives/ModalUi.jsx
index 36486dbd33..967dfefbf2 100644
--- a/apps/OpenSign/src/primitives/ModalUi.jsx
+++ b/apps/OpenSign/src/primitives/ModalUi.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { createPortal } from "react-dom";
 import "../styles/signature.css";
 import Loader from "./Loader";
 import Tooltip from "./Tooltip";
@@ -49,7 +50,7 @@ const ModalUi = ({
     };
   }, [isOpen, position]);
 
-  return (
+  return createPortal(
     <>
       {isOpen && (
         <dialog
@@ -95,7 +96,8 @@ const ModalUi = ({
           </div>
         </dialog>
       )}
-    </>
+    </>,
+    document.body
   );
 };
 

From 5cf0dda65f178b4ec108d28ff26ef9339cd7ba45 Mon Sep 17 00:00:00 2001
From: Chris Mathevet <chris.mathevet@inLibro.com>
Date: Thu, 13 Aug 2026 11:54:56 -0400
Subject: [PATCH 2/2] Adjust share options modal sizes for translations

---
 apps/OpenSign/src/primitives/ShareButton.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/OpenSign/src/primitives/ShareButton.jsx b/apps/OpenSign/src/primitives/ShareButton.jsx
index bcc2d9225f..385fb92263 100644
--- a/apps/OpenSign/src/primitives/ShareButton.jsx
+++ b/apps/OpenSign/src/primitives/ShareButton.jsx
@@ -73,13 +73,14 @@ export default function ShareButton({ title, text, url, className, children }) {
             </>
           }
           handleClose={() => setPopupOpen(false)}
+          reduceWidth="md:min-w-[650px]"
         >
           {error && <p style={{ color: "red" }}>Error: {error.message}</p>}
-          <div className="grid grid-cols-1 md:grid-cols-2 justify-items-start text-lg p-[20px]">
+          <div className="flex flex-wrap justify-center text-lg p-[20px]">
             {/* Copy Link */}
             <button
               onClick={() => navigator.clipboard.writeText(url)}
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-clipboard fa-lg"></i> Copy to clipboard
             </button>
@@ -92,7 +93,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-x-twitter fa-lg"></i> Share on
               Twitter
@@ -107,7 +108,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-facebook fa-lg"></i> Share on
               Facebook
@@ -122,7 +123,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-whatsapp fa-lg"></i> Share on
               WhatsApp
@@ -137,7 +138,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-envelope fa-lg"></i> Share via Gmail
             </button>
@@ -151,7 +152,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-microsoft fa-lg"></i> Share on Teams
             </button>
@@ -165,7 +166,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-envelope-open-text fa-lg"></i> Share via
               Outlook