From bb56647584a3b62379bd798fa0a94d2374289b00 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 13 Jan 2026 01:14:30 +0100
Subject: [PATCH] Web App Popup: Fix layout (#6581)

---
 .../webApp/WebAppModalTabContent.module.scss  |  4 +-
 .../modals/webApp/WebAppModalTabContent.tsx   | 53 ++++++++++---------
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/modals/webApp/WebAppModalTabContent.module.scss b/src/components/modals/webApp/WebAppModalTabContent.module.scss
index 93a7b5fd0..95f65a5ec 100644
--- a/src/components/modals/webApp/WebAppModalTabContent.module.scss
+++ b/src/components/modals/webApp/WebAppModalTabContent.module.scss
@@ -242,11 +242,13 @@
 
 .web-app-popup {
   :global(.modal-dialog) {
+    width: auto;
+    min-width: min(22rem, 100%) !important;
     max-width: min(30rem, 100%);
   }
 
   &.without-title :global(.modal-content) {
-    padding-top: 0;
+    padding-top: 0.75rem;
   }
 
   :global(.modal-content) {
diff --git a/src/components/modals/webApp/WebAppModalTabContent.tsx b/src/components/modals/webApp/WebAppModalTabContent.tsx
index 2641d6632..3c513902c 100644
--- a/src/components/modals/webApp/WebAppModalTabContent.tsx
+++ b/src/components/modals/webApp/WebAppModalTabContent.tsx
@@ -150,6 +150,9 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
   const [isLoaded, markLoaded, markUnloaded] = useFlag(false);
 
   const [popupParameters, setPopupParameters] = useState<PopupOptions>();
+
+  const renderingPopupParameters = useCurrentOrPrev(popupParameters);
+
   const [isRequestingPhone, setIsRequestingPhone] = useState(false);
   const [isRequestingWriteAccess, setIsRequestingWriteAccess] = useState(false);
   const [clipboardRequestId, setClipboardRequestId] = useState<string>();
@@ -1153,32 +1156,30 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
           </Button>
         </div>
       )}
-      {popupParameters && (
-        <Modal
-          isOpen={Boolean(popupParameters)}
-          title={popupParameters.title || NBSP}
-          className={
-            buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
-          }
-          hasAbsoluteCloseButton
-          onClose={handleAppPopupModalClose}
-        >
-          {popupParameters.message}
-          <div className="dialog-buttons mt-2">
-            {popupParameters.buttons.map((button) => (
-              <Button
-                key={button.id || button.type}
-                className="confirm-dialog-button"
-                color={button.type === 'destructive' ? 'danger' : 'primary'}
-                isText
-                onClick={() => handleAppPopupClose(button.id)}
-              >
-                {button.text || oldLang(DEFAULT_BUTTON_TEXT[button.type])}
-              </Button>
-            ))}
-          </div>
-        </Modal>
-      )}
+      <Modal
+        isOpen={Boolean(popupParameters)}
+        title={renderingPopupParameters?.title || NBSP}
+        className={
+          buildClassName(styles.webAppPopup, !renderingPopupParameters?.title?.trim().length && styles.withoutTitle)
+        }
+        hasCloseButton
+        onClose={handleAppPopupModalClose}
+      >
+        {renderingPopupParameters?.message}
+        <div className="dialog-buttons mt-2">
+          {renderingPopupParameters?.buttons.map((button) => (
+            <Button
+              key={button.id || button.type}
+              className="confirm-dialog-button"
+              color={button.type === 'destructive' ? 'danger' : 'primary'}
+              isText
+              onClick={() => handleAppPopupClose(button.id)}
+            >
+              {button.text || oldLang(DEFAULT_BUTTON_TEXT[button.type])}
+            </Button>
+          ))}
+        </div>
+      </Modal>
 
       <ConfirmDialog
         isOpen={isRequestingPhone}