MOBILE-3833 alerts: Increase max-width in alert and confirms

src/addons/calendar/components/calendar/calendar.scss

@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
     --addon-calendar-blank-day-background-color: var(--light);
 
@@ -48,7 +50,7 @@
             }
         }
 
-        @media (min-width: 768px) {
+        @include media-breakpoint-up(md) {
             .addon-calendar-day-number {
                 text-align: start;
             }

src/core/features/login/components/site-onboarding/site-onboarding.scss

@@ -1,8 +1,10 @@
+@import "~theme/globals";
+
 :host {
     .core-login-onboarding-step {
         padding: 10px 20px;
         text-align: center;
-        @media (min-width: 768px) {
+        @include media-breakpoint-up(md) {
             max-width: 80%;
         }
         margin: 0 auto;

src/core/features/login/pages/site/site.scss

@@ -100,7 +100,7 @@
     }
 }
 
-@media (min-width: 768px) {
+@include media-breakpoint-up(md) {
     ion-content > * {
         max-width: 600px;
         margin: 0 auto;

src/theme/theme.base.scss

@@ -393,6 +393,15 @@ ion-alert.core-nohead {
 
 ion-alert {
     --border-radius: var(--huge-radius);
+
+    &.md, &.ios {
+        --max-width: 80%;
+
+        @include media-breakpoint-up(md) {
+            --max-width: 384px;
+        }
+    }
+
     .alert-wrapper {
         overflow: auto;
         border-radius: var(--border-radius) !important;