From 7a554bee29f9694c326314e1fb67d2b13c425e20 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Fri, 11 Feb 2022 12:23:00 +0100
Subject: [PATCH] MOBILE-3833 alerts: Increase max-width in alert and confirms

---
 src/addons/calendar/components/calendar/calendar.scss    | 4 +++-
 .../components/site-onboarding/site-onboarding.scss      | 4 +++-
 src/core/features/login/pages/site/site.scss             | 2 +-
 src/theme/theme.base.scss                                | 9 +++++++++
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/addons/calendar/components/calendar/calendar.scss b/src/addons/calendar/components/calendar/calendar.scss
index ab1d358e8..35cd3ccbd 100644
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/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;
             }
diff --git a/src/core/features/login/components/site-onboarding/site-onboarding.scss b/src/core/features/login/components/site-onboarding/site-onboarding.scss
index 102760920..94fc77e9a 100644
--- a/src/core/features/login/components/site-onboarding/site-onboarding.scss
+++ b/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;
diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss
index b11602d42..8c655c802 100644
--- a/src/core/features/login/pages/site/site.scss
+++ b/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;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 0143bf8b3..9d0ebbe08 100644
--- a/src/theme/theme.base.scss
+++ b/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;