From dbea88fa56a9e7905844a23dafb664af5abf570f Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sat, 18 Apr 2026 20:20:06 +0300
Subject: [PATCH] client/modal dialog: add support for full page dialogs on
 mobile

---
 apps/client/src/stylesheets/style.css   | 15 +++++++++++++++
 apps/client/src/widgets/react/Modal.tsx |  8 ++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/stylesheets/style.css b/apps/client/src/stylesheets/style.css
index c1672f50c4..f9bc58362e 100644
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1666,6 +1666,21 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         display: flex;
     }
 
+    body.mobile .modal-dialog.modal-dialog-full-page-on-mobile {
+        width: 100%;
+        height: 100%;
+        max-height: unset;
+
+        .modal-content {
+            border-radius: 0;
+            border: 0;
+
+            .modal-body {
+                overflow: scroll;
+            }
+        }
+    }
+
     body.mobile .modal-content {
         overflow-y: auto;
         border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index fcaa287380..0a3d35fa79 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -77,9 +77,13 @@ export interface ModalProps {
      * If true, the modal will not focus itself after becoming visible.
      */
     noFocus?: boolean;
+    /**
+     * Indicates if the dialog will be displayed as a full page on mobile devices.
+     */
+    isFullPageOnMobile?: boolean;
 }
 
-export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
+export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus, isFullPageOnMobile }: ModalProps) {
     const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
     const elementToFocus = useRef<Element | null>();
@@ -143,7 +147,7 @@ export default function Modal({ children, className, size, title, customTitleBar
 
     return (
         <div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
-            {(show || keepInDom) && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
+            {(show || keepInDom) && <div className={clsx("modal-dialog", `modal-${size}`, {"modal-dialog-scrollable": scrollable, "modal-dialog-full-page-on-mobile": isFullPageOnMobile})} style={documentStyle} role="document">
                 <div className="modal-content">
                     <div className="modal-header">
                         {!title || typeof title === "string" ? (