[FIX] web_editor: correctly display dialogs on mobile

Before this commit, web_editor dialog was opened inside an iframe and
not on the window.top. So dialogs didn't take all screen area.

To fix this, we open dialogs in full screen mode but we also put the
web editor in full screen to increase the size of the iframe.
Note that the initial state of the web editor (full screen or not) is
preserved when you close the modal.

We also add some fixes to make the "web_editor media dialog" responsive.

1 files changed, 91 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 43f174e2862..d4ad43d6a89 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -401,3 +401,94 @@ a.o_underline {
         @extend %o-nocontent-empty-document;
     }
 }
+
+@include media-breakpoint-down(sm) {
+    // modal select media
+    .o_technical_modal {
+        // see template 'web_editor.FieldTextHtml.fullscreen'
+        z-index: 2001;
+
+        > .o_select_media_dialog {
+            max-width: inherit !important;
+            z-index: 2001;
+
+            .modal-dialog, .model-content {
+                height: 100%;
+            }
+
+            .modal-body {
+                .nav .nav-item.search {
+                    width: 100%;
+
+                    .btn-group {
+                        display: flex;
+                        justify-content: space-around;
+                        padding: 5px;
+                    }
+                }
+
+                // center pictogram
+                .font-icons-icons {
+                    text-align: center;
+                }
+
+                // fix search image
+                .form-control.o_we_search {
+                    height: inherit;
+                }
+
+                .form-inline {
+                    .btn-group {
+                        width: 100%;
+
+                        .btn.btn-primary:not(.dropdown-toggle) {
+                            width: 90%;
+                        }
+                    }
+
+                    > .input-group.ml-2 {
+                        margin-left: 0 !important;
+
+                        > .input-group-append {
+                            width: 100%;
+
+                            > .btn {
+                                width: 100%;
+                            }
+
+                            > .ml-2 {
+                                margin-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+
+                // attachment cells
+                .o_we_existing_attachments > .row {
+                    flex-direction: column;
+
+                    > .o_existing_attachment_cell {
+                        flex: initial;
+                        max-width: 100%;
+
+                        > .o_existing_attachment_remove {
+                            opacity: inherit;
+                            top: 10px;
+                        }
+                    }
+                }
+
+                // select media dialog unsplash error
+                #editor-media-image .unsplash_img_container .unsplash_error .mx-auto {
+                    width: 100%;
+
+                    .form-group {
+                        input.w-100 {
+                            min-width: 100px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}