A11Y: set modal widths with EMs; improves scaling (#14863)

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 {

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;

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
   }
 }

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;
   }
 }

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 {