diff --git a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts b/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts index 0b5c93ff59..c177e8282b 100644 --- a/ui-ngx/src/app/modules/home/pages/mobile/common/editor-panel.component.ts +++ b/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, diff --git a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts b/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts index 84848a757c..c21603b240 100644 --- a/ui-ngx/src/app/modules/home/pages/notification/template/configuration/notification-template-configuration.component.ts +++ b/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,