Fix TinyMCE editor image source style and issue with a shaking window on panel hover.

ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts

@@ -59,9 +59,33 @@ export class EditorPanelComponent implements OnInit {
     resize: false,
     setup: (editor) => {
       editor.on('PostRender', function() {
-        const container = editor.getContainer().closest('.tb-popover-content');
-        const uiContainer = document.querySelector('.tox.tox-tinymce-aux');
-        container.parentNode.appendChild(uiContainer);
+        const container = document.querySelector('.tox.tox-tinymce-aux');
+        const styleSheet = document.createElement('style');
+        styleSheet.innerText = `
+          .tox-tiered-menu .tox-menu {
+            width: fit-content;
+            max-width: min(80%, 440px);
+            @media screen and (max-width: 510px) {
+              max-width: calc(100% - 64px);
+            }
+            media screen and (min-width: 511px) and (max-width: 548px) {
+              max-width: calc(100% - 84px);
+            }
+            media screen and (min-width: 549px) and (max-width: 599px) {
+              max-width: calc(100% - 104px);
+            }
+          }
+          .tox-tiered-menu .tox-menu .tox-collection__item-label {
+            word-break: normal;
+          }
+          @media screen and (max-width: 890px) {
+            .tox-tiered-menu > .tox-collection--list:not(:first-child) {
+              left: auto !important;
+              right: 0 !important;
+            }
+          }
+        `;
+        container.prepend(styleSheet);
       });
     },
     relative_urls: false,

ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts

@@ -97,9 +97,33 @@ export class NotificationTemplateConfigurationComponent implements OnDestroy, Co
     promotion: false,
     setup: (editor) => {
       editor.on('PostRender', function() {
-        const container = editor.getContainer().closest('.mat-mdc-dialog-container');
-        const uiContainer = document.querySelector('.tox.tox-tinymce-aux');
-        container.parentNode.appendChild(uiContainer);
+        const container = document.querySelector('.tox.tox-tinymce-aux');
+        const styleSheet = document.createElement('style');
+        styleSheet.innerText = `
+          .tox-tiered-menu .tox-menu {
+            width: fit-content;
+            max-width: min(80%, 440px);
+            @media screen and (max-width: 510px) {
+              max-width: calc(100% - 64px);
+            }
+            media screen and (min-width: 511px) and (max-width: 548px) {
+              max-width: calc(100% - 84px);
+            }
+            media screen and (min-width: 549px) and (max-width: 599px) {
+              max-width: calc(100% - 104px);
+            }
+          }
+          .tox-tiered-menu .tox-menu .tox-collection__item-label {
+            word-break: normal;
+          }
+          @media screen and (max-width: 890px) {
+            .tox-tiered-menu > .tox-collection--list:not(:first-child) {
+              left: auto !important;
+              right: 0 !important;
+            }
+          }
+        `;
+        container.prepend(styleSheet);
       });
     },
     relative_urls: false,