diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index 51a27ce4eb6..8b826b345cb 100644 --- a/app/assets/stylesheets/common/base/modal.scss +++ b/app/assets/stylesheets/common/base/modal.scss @@ -12,10 +12,11 @@ } .modal-inner-container { + --modal-max-width: 47em; // set in ems to scale with user font-size box-sizing: border-box; flex: 0 1 auto; margin: 0 auto; - max-width: 700px; + max-width: var(--modal-max-width); background-color: var(--secondary); box-shadow: shadow("modal"); @@ -273,7 +274,7 @@ pre code { white-space: pre-wrap; - max-width: 700px; + max-width: var(--modal-max-width); } } @@ -364,7 +365,7 @@ } .incoming-email-content { height: 300px; - max-width: 700px; + max-width: 100%; width: 90vw; // forcing textarea wider textarea, .incoming-email-html-part { @@ -372,6 +373,7 @@ border: none; border-top: 1px solid var(--primary-low); padding-top: 10px; + width: 100%; } textarea { font-family: monospace; @@ -427,7 +429,8 @@ } .change-timestamp { - max-width: 420px; + width: 28em; // scales with user font-size + max-width: 90vw; // prevents overflow due to extra large user font-size } .change-timestamp { diff --git a/app/assets/stylesheets/common/base/share_link.scss b/app/assets/stylesheets/common/base/share_link.scss index bb2b95ad7eb..e074d8e4171 100644 --- a/app/assets/stylesheets/common/base/share_link.scss +++ b/app/assets/stylesheets/common/base/share_link.scss @@ -59,7 +59,8 @@ box-shadow: shadow("card"); background-color: var(--secondary); padding: 0.5em; - width: 300px; + width: 20em; // scales with user font-size + max-width: 100vw; // prevents overflow due to extra large user font-size display: none; &.visible { display: block; diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss index 6356b420f8f..3c7368df849 100644 --- a/app/assets/stylesheets/desktop/modal.scss +++ b/app/assets/stylesheets/desktop/modal.scss @@ -112,6 +112,7 @@ .create-invite-bulk-modal, .share-topic-modal { .modal-inner-container { - width: 600px; + width: 40em; // scale with user font-size + max-width: 100vw; // prevent overflow if user font-size is enourmous } } diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss index 4f9760ca7cd..9f2543d22cc 100644 --- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss +++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss @@ -311,7 +311,8 @@ html:not(.mobile-view) { .fixed-modal .discourse-local-dates-create-modal.modal-body { - width: 600px; + width: 40em; // using ems to scale with user font size + max-width: 100vw; // avoids overflow if someone has extreme font-sizes impacting width max-height: 400px !important; } } diff --git a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss index caff3a9eecf..1bfac2e1792 100644 --- a/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss +++ b/plugins/poll/assets/stylesheets/desktop/poll-ui-builder.scss @@ -1,6 +1,7 @@ .poll-ui-builder-modal { .modal-inner-container { - width: 600px; + width: 40em; // scale with user font-size + max-width: 100vw; // prevent overflow if user font-size is enourmous } .modal-body {