From 9902cbb5a64a1e8435add45a96e1570d772cd518 Mon Sep 17 00:00:00 2001
From: Ubaldo Santos <ubaldo.santos@wiris.com>
Date: Wed, 4 Dec 2024 16:59:26 +0100
Subject: [PATCH] fix: update modal behavior and styles for improved iOS
 keyboard handling

---
 packages/ckeditor5/dist/browser/index.js |  1 -
 packages/devkit/src/modal.js             | 22 ++++++++++++++++------
 packages/devkit/styles/styles.css        | 19 ++++++++-----------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/ckeditor5/dist/browser/index.js b/packages/ckeditor5/dist/browser/index.js
index 6e244ca91..6fe1434c7 100644
--- a/packages/ckeditor5/dist/browser/index.js
+++ b/packages/ckeditor5/dist/browser/index.js
@@ -8116,7 +8116,6 @@ var maxHoverIcon = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
             // iOS keyboard is a float div which can overlay the modal object.
             if (this.deviceProperties.isIOS) {
                 this.iosSoftkeyboardOpened = false;
-                this.setContainerHeight(`${100 + this.iosMeasureUnit}`);
             }
         }
         if (!ContentManager.isEditorLoaded()) {
diff --git a/packages/devkit/src/modal.js b/packages/devkit/src/modal.js
index be4be07db..fe40215e0 100644
--- a/packages/devkit/src/modal.js
+++ b/packages/devkit/src/modal.js
@@ -48,7 +48,7 @@ export default class ModalDialog {
     const isIOS = ContentManager.isIOS();
     this.iosSoftkeyboardOpened = false;
     this.iosMeasureUnit = ua.indexOf("crios") === -1 ? "%" : "vh";
-    this.iosDivHeight = `100%${this.iosMeasureUnit}`;
+    this.iosDivHeight = `auto`;
 
     const deviceWidth = window.outerWidth;
     const deviceHeight = window.outerHeight;
@@ -537,7 +537,6 @@ export default class ModalDialog {
       // iOS keyboard is a float div which can overlay the modal object.
       if (this.deviceProperties.isIOS) {
         this.iosSoftkeyboardOpened = false;
-        this.setContainerHeight(`${100 + this.iosMeasureUnit}`);
       }
     }
 
@@ -1440,14 +1439,21 @@ export default class ModalDialog {
    * Event handler that change container size when IOS soft keyboard is opened.
    */
   handleOpenedIosSoftkeyboard() {
-    if (!this.iosSoftkeyboardOpened && this.iosDivHeight != null && this.iosDivHeight === `100${this.iosMeasureUnit}`) {
+    if (
+      !this.iosSoftkeyboardOpened && this.iosDivHeight != null &&
+      this.iosDivHeight === `auto`
+    ) {
       if (this.portraitMode()) {
         this.setContainerHeight(`60${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
       } else {
         this.setContainerHeight(`35${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
       }
     }
     this.iosSoftkeyboardOpened = true;
+    //change  this.wrapper to  flex-grow 1
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**
@@ -1455,7 +1461,7 @@ export default class ModalDialog {
    */
   handleClosedIosSoftkeyboard() {
     this.iosSoftkeyboardOpened = false;
-    this.setContainerHeight(`100${this.iosMeasureUnit}`);
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**
@@ -1465,11 +1471,15 @@ export default class ModalDialog {
     if (this.iosSoftkeyboardOpened) {
       if (this.portraitMode()) {
         this.setContainerHeight(`65${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
+
       } else {
         this.setContainerHeight(`45${this.iosMeasureUnit}`);
+        this.wrapper.style.flexGrow = "unset";
+
       }
     } else {
-      this.setContainerHeight(`100${this.iosMeasureUnit}`);
+      this.wrapper.style.flexGrow = "1";
     }
   }
 
@@ -1477,7 +1487,7 @@ export default class ModalDialog {
    * Change container sizes when orientation is changed on Android.
    */
   orientationChangeAndroidSoftkeyboard() {
-    this.setContainerHeight("100%");
+    this.wrapper.style.flexGrow = "1";
   }
 
   /**
diff --git a/packages/devkit/styles/styles.css b/packages/devkit/styles/styles.css
index 2f5094d08..aae231098 100644
--- a/packages/devkit/styles/styles.css
+++ b/packages/devkit/styles/styles.css
@@ -160,17 +160,14 @@
 
 .wrs_modal_dialogContainer.wrs_modal_ios,
 .wrs_modal_dialogContainer.wrs_modal_android {
-  margin: 0;
-  position: fixed;  
-  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top)) !important;
-
+  margin: 0px;
+  position: fixed;
+  height: auto;
   overflow: hidden;
-  top: env(safe-area-inset-top);
-  left: env(safe-area-inset-left);
-  right: env(safe-area-inset-right);
-  bottom: env(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom) !important;
-
+  top: calc(env(safe-area-inset-top));
+  right: calc(env(safe-area-inset-right));
+  left: calc(env(safe-area-inset-left));
+  bottom: calc(env(safe-area-inset-bottom));
   transform: none;
   box-sizing: border-box;
   display: flex;
@@ -200,7 +197,7 @@
 
 .wrs_content_container.wrs_modal_ios,
 .wrs_content_container.wrs_modal_android {
-  flex-grow: 1;
+  flex-grow: 0.98;
   display: flex;
 }