FIX: IE11 layout glitches

FIX: IE11 layout glitches

IE11 requires a unit on the third parameter (flex-basis) of the flex property

diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 17ccf65..88fdaf7 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -470,7 +470,7 @@ $mobile-breakpoint: 700px;
   nav {
     display: inline-flex;
     position: relative;
-    flex: 1 0 0;
+    flex: 1 0 0px;
     height: auto;
     overflow: hidden;
     padding: 0;
@@ -892,7 +892,7 @@ table#user-badges {
 
     .value-input {
       box-sizing: border-box;
-      flex: 1 0 0;
+      flex: 1 0 0px;
       border-color: $primary-low;
       cursor: pointer;
       margin: 0;
@@ -919,7 +919,7 @@ table#user-badges {
     margin-left: -0.25em;
     margin-top: -0.125em;
     .new-value-input {
-      flex: 1 0 0;
+      flex: 1 0 0px;
     }
     .value-input,
     .new-value-input {
diff --git a/app/assets/stylesheets/common/admin/admin_report.scss b/app/assets/stylesheets/common/admin/admin_report.scss
index 395d759..3bf7481 100644
--- a/app/assets/stylesheets/common/admin/admin_report.scss
+++ b/app/assets/stylesheets/common/admin/admin_report.scss
@@ -132,7 +132,7 @@
 
       .mode {
         display: inline-flex;
-        flex: 1 0 0;
+        flex: 1 0 0px;
 
         .mode-btn.is-current {
           color: $tertiary;
diff --git a/app/assets/stylesheets/common/admin/admin_report_counters.scss b/app/assets/stylesheets/common/admin/admin_report_counters.scss
index 476b65b..0496e7d 100644
--- a/app/assets/stylesheets/common/admin/admin_report_counters.scss
+++ b/app/assets/stylesheets/common/admin/admin_report_counters.scss
@@ -1,7 +1,7 @@
 .admin-report {
   .admin-report-counters {
     display: grid;
-    flex: 1 0 0;
+    flex: 1 0 0px;
     grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
     grid-template-rows: repeat(auto-fit, minmax(32px, 1fr));
     align-items: center;
diff --git a/app/assets/stylesheets/common/admin/admin_reports.scss b/app/assets/stylesheets/common/admin/admin_reports.scss
index 7481cad..b987b04 100644
--- a/app/assets/stylesheets/common/admin/admin_reports.scss
+++ b/app/assets/stylesheets/common/admin/admin_reports.scss
@@ -27,7 +27,7 @@
 
     .filters {
       display: flex;
-      flex: 1 0 0;
+      flex: 1 0 0px;
       align-items: center;
       flex-direction: column;
       margin-left: 2em;
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index eebb887..6190778 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -301,7 +301,7 @@
 
 .counters-list {
   display: flex;
-  flex: 1 0 0;
+  flex: 1 0 0px;
   flex-direction: column;
 
   .counters-header {
diff --git a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
index 9901a4e..5feaf51 100644
--- a/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
+++ b/app/assets/stylesheets/common/base/edit-topic-status-update-modal.scss
@@ -60,6 +60,6 @@
 // mobile styles
 .mobile-view .edit-topic-timer-modal {
   .select-kit.combo-box {
-    flex: 1 0 0;
+    flex: 1 0 0px;
   }
 }
diff --git a/app/assets/stylesheets/common/base/emoji.scss b/app/assets/stylesheets/common/base/emoji.scss
index d931856..30a4757 100644
--- a/app/assets/stylesheets/common/base/emoji.scss
+++ b/app/assets/stylesheets/common/base/emoji.scss
@@ -26,7 +26,7 @@ sup img.emoji {
 .emoji-picker .categories-column {
   display: flex;
   flex-direction: column;
-  flex: 1 0 0;
+  flex: 1 0 0px;
   align-items: center;
   justify-content: space-between;
   border-right: 1px solid $primary-low;
@@ -61,7 +61,7 @@ sup img.emoji {
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   padding: 0;
-  flex: 1 0 0;
+  flex: 1 0 0px;
   flex-direction: column;
 }
 
@@ -223,7 +223,7 @@ sup img.emoji {
 .emoji-picker .filter input {
   height: 24px;
   margin: 0;
-  flex: 1 0 0;
+  flex: 1 0 0px;
   border: none;
   box-shadow: none;
   padding-right: 24px;
@@ -247,7 +247,7 @@ sup img.emoji {
   align-items: center;
   justify-content: flex-start;
   padding: 4px;
-  flex: 1 0 0;
+  flex: 1 0 0px;
 }
 
 .emoji-picker .filter .clear-filter {
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 2713ec0..66caf71 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -567,7 +567,7 @@
 
       .left,
       .right {
-        flex: 1 0 0;
+        flex: 1 0 0px;
       }
 
       .text {
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 717851c..2d645b9 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -10,7 +10,7 @@
     margin-bottom: 1em;
 
     .search-query {
-      flex: 1 0 0;
+      flex: 1 0 0px;
       margin: 0 0.5em 0 0;
     }
 
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 48eff56..014a070 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -396,7 +396,7 @@ aside.quote {
 
       .remove-invited {
         display: flex;
-        flex: 1 0 0;
+        flex: 1 0 0px;
         align-items: center;
         justify-content: center;
         box-sizing: border-box;
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index e959a6a..245a61f 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -17,7 +17,7 @@
 
     .select-kit-filter {
       border: 0;
-      flex: 1 0 0;
+      flex: 1 0 0px;
       margin: 1px;
     }
 
@@ -89,7 +89,7 @@
         min-width: 50px;
         padding: 0;
         outline: none;
-        flex: 1 0 0;
+        flex: 1 0 0px;
 
         .filter-input,
         .filter-input:focus {
@@ -112,7 +112,7 @@
       .selected-color {
         .selected-color-wrapper {
           display: flex;
-          flex: 1 0 0;
+          flex: 1 0 0px;
           flex-direction: column;
         }
 
@@ -137,7 +137,7 @@
           padding: 2px 4px;
           line-height: $line-height-medium;
           display: flex;
-          flex: 1 0 0;
+          flex: 1 0 0px;
           align-items: center;
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index 4cfb90b..274f4fb 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -57,7 +57,7 @@
         display: flex;
 
         .period-title {
-          flex: 1 0 0;
+          flex: 1 0 0px;
         }
 
         .date-section {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index a96520b..6adabd6 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -210,7 +210,7 @@
       background: none;
       margin: 0;
       padding: 0;
-      flex: 1 0 0;
+      flex: 1 0 0px;
       outline: none;
       border: 0;
       border-radius: 0;
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 0d792d4..fe742b4 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -117,7 +117,7 @@
   flex-flow: row wrap;
 
   div.column {
-    flex: 1 0 0;
+    flex: 1 0 0px;
     flex-direction: row;
     min-width: 300px;
   }

[... diff too long, it was truncated ...]

GitHub sha: ba5e17a7

1 Like

This commit has been mentioned on Discourse Meta. There might be relevant details there: