From 4f42ca11ff267d4206b53b1e198eeaf34078a505 Mon Sep 17 00:00:00 2001
From: Bas Brands <bas@moodle.com>
Date: Mon, 5 Nov 2018 13:43:52 +0100
Subject: [PATCH] MDL-63675 block_myoverview: IE11 card size issues

---
 theme/boost/scss/moodle/blocks.scss         | 22 ++++++++++---------
 theme/boost/style/moodle.css                | 24 +++++++++++----------
 theme/bootstrapbase/less/moodle/blocks.less |  9 ++++----
 theme/bootstrapbase/style/moodle.css        |  9 ++++----
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/theme/boost/scss/moodle/blocks.scss b/theme/boost/scss/moodle/blocks.scss
index 31bf1659dd1..784dc06ae7e 100644
--- a/theme/boost/scss/moodle/blocks.scss
+++ b/theme/boost/scss/moodle/blocks.scss
@@ -166,8 +166,10 @@ $card-gutter : $card-deck-margin * 2;
 
 .dashboard-card-deck .dashboard-card {
     margin-bottom: $card-gutter;
-    flex-basis: 100%;
+    flex-basis: auto;
+    width: 100%;
     flex-grow: 0;
+    flex-shrink: 0;
     .dashboard-card-img {
         height: 7rem;
         background-position: center;
@@ -181,22 +183,22 @@ $card-gutter : $card-deck-margin * 2;
 .dashboard-card-deck {
     @include media-breakpoint-up(sm) {
         .dashboard-card {
-            flex-basis: calc(50% - #{$card-gutter});
+            width: calc(50% - #{$card-gutter});
         }
     }
     @include media-breakpoint-up(md) {
         .dashboard-card {
-            flex-basis: calc(33.33% - #{$card-gutter});
+            width: calc(33.33% - #{$card-gutter});
         }
     }
     @include media-breakpoint-up(lg) {
         .dashboard-card {
-            flex-basis: calc(25% - #{$card-gutter});
+            width: calc(25% - #{$card-gutter});
         }
     }
     @include media-breakpoint-up(xl) {
         .dashboard-card {
-            flex-basis: calc(20% - #{$card-gutter});
+            width: calc(20% - #{$card-gutter});
         }
     }
 }
@@ -205,12 +207,12 @@ $card-gutter : $card-deck-margin * 2;
     .dashboard-card-deck {
         @include media-breakpoint-up(lg) {
             .dashboard-card {
-                flex-basis: calc(33.33% - #{$card-gutter});
+                width: calc(33.33% - #{$card-gutter});
             }
         }
         @include media-breakpoint-up(xl) {
             .dashboard-card {
-                flex-basis: calc(25% - #{$card-gutter});
+                width: calc(25% - #{$card-gutter});
             }
         }
     }
@@ -220,12 +222,12 @@ body.drawer-open-left #region-main.has-blocks {
     .dashboard-card-deck {
         @include media-breakpoint-up(lg) {
             .dashboard-card {
-                flex-basis: calc(33.33% - #{$card-gutter});
+                width: calc(33.33% - #{$card-gutter});
             }
         }
         @media (min-width: 1400px) {
             .dashboard-card {
-                flex-basis: calc(25% - #{$card-gutter});
+                width: calc(25% - #{$card-gutter});
             }
         }
     }
@@ -236,7 +238,7 @@ body.drawer-open-left #region-main.has-blocks {
         .dashboard-card-deck {
             margin: 0;
             .dashboard-card {
-                flex-basis: 100% !important;
+                width: 100% !important;
                 margin-left: 0;
                 margin-right: 0;
             }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 11c75205eb0..39565740e4a 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11232,8 +11232,10 @@ div.editor_atto_toolbar button .icon {
 
 .dashboard-card-deck .dashboard-card {
   margin-bottom: 0.5rem;
-  flex-basis: 100%;
-  flex-grow: 0; }
+  flex-basis: auto;
+  width: 100%;
+  flex-grow: 0;
+  flex-shrink: 0; }
   .dashboard-card-deck .dashboard-card .dashboard-card-img {
     height: 7rem;
     background-position: center;
@@ -11243,41 +11245,41 @@ div.editor_atto_toolbar button .icon {
 
 @media (min-width: 576px) {
   .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(50% - 0.5rem); } }
+    width: calc(50% - 0.5rem); } }
 
 @media (min-width: 768px) {
   .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(33.33% - 0.5rem); } }
+    width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 992px) {
   .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(25% - 0.5rem); } }
+    width: calc(25% - 0.5rem); } }
 
 @media (min-width: 1200px) {
   .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(20% - 0.5rem); } }
+    width: calc(20% - 0.5rem); } }
 
 @media (min-width: 992px) {
   #region-main.has-blocks .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(33.33% - 0.5rem); } }
+    width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1200px) {
   #region-main.has-blocks .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(25% - 0.5rem); } }
+    width: calc(25% - 0.5rem); } }
 
 @media (min-width: 992px) {
   body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(33.33% - 0.5rem); } }
+    width: calc(33.33% - 0.5rem); } }
 
 @media (min-width: 1400px) {
   body.drawer-open-left #region-main.has-blocks .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(25% - 0.5rem); } }
+    width: calc(25% - 0.5rem); } }
 
 @media (min-width: 1200px) {
   #block-region-side-pre .dashboard-card-deck {
     margin: 0; }
     #block-region-side-pre .dashboard-card-deck .dashboard-card {
-      flex-basis: 100% !important;
+      width: 100% !important;
       margin-left: 0;
       margin-right: 0; } }
 
diff --git a/theme/bootstrapbase/less/moodle/blocks.less b/theme/bootstrapbase/less/moodle/blocks.less
index 85ef79350ec..da6a41fb8fa 100644
--- a/theme/bootstrapbase/less/moodle/blocks.less
+++ b/theme/bootstrapbase/less/moodle/blocks.less
@@ -458,7 +458,8 @@
         flex-grow: 0;
         flex-shrink: 0;
         min-width: 0;
-        flex-basis: 100%;
+        width: 100%;
+        flex-basis: auto;
     }
     @media (min-width: 576px) {
         .dashboard-card {
@@ -466,13 +467,13 @@
             flex-direction: column;
             margin-right: 0.25rem;
             margin-left: 0.25rem;
-            flex-basis: ~"calc(50% - 0.6rem)";
+            width: ~"calc(50% - 0.5rem)";
         }
     }
 
     @media (min-width: 1200px) {
         .dashboard-card {
-            flex-basis: ~"calc(33.333% - 0.5rem)";
+            width: ~"calc(33.333% - 0.5rem)";
         }
     }
 }
@@ -483,7 +484,7 @@
         margin: 0;
         height: unset;
         .dashboard-card {
-            flex-basis: 100%;
+            width: 100%;
             margin-left: 0;
             margin-right: 0;
         }
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 99854a3c4ae..9f65b28bd6e 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -16672,7 +16672,8 @@ body {
   flex-grow: 0;
   flex-shrink: 0;
   min-width: 0;
-  flex-basis: 100%;
+  width: 100%;
+  flex-basis: auto;
 }
 @media (min-width: 576px) {
   .dashboard-card-deck .dashboard-card {
@@ -16680,12 +16681,12 @@ body {
     flex-direction: column;
     margin-right: 0.25rem;
     margin-left: 0.25rem;
-    flex-basis: calc(50% - 0.6rem);
+    width: calc(50% - 0.5rem);
   }
 }
 @media (min-width: 1200px) {
   .dashboard-card-deck .dashboard-card {
-    flex-basis: calc(33.333% - 0.5rem);
+    width: calc(33.333% - 0.5rem);
   }
 }
 @media (min-width: 768px) {
@@ -16696,7 +16697,7 @@ body {
   }
   #block-region-side-post .dashboard-card-deck .dashboard-card,
   #block-region-side-pre .dashboard-card-deck .dashboard-card {
-    flex-basis: 100%;
+    width: 100%;
     margin-left: 0;
     margin-right: 0;
   }