Most Read IE11 Fix

packages/components/psammead-most-read/CHANGELOG.md

@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.1 | [PR#3237](https://github.com/bbc/psammead/pull/3237) Fixed most-read IE layout bug |
 | 4.0.0 | [PR#3201](https://github.com/bbc/psammead/pull/3201) Refactor RankWrapper in MostRead |
 | 3.0.0 | [PR#3200](https://github.com/bbc/psammead/pull/3200) Show OneColumn in MostRead for all breakpoints for STY Pages |
 | 2.0.3 | [PR#3219](https://github.com/bbc/psammead/pull/3219) Talos - Bump Dependencies - @bbc/psammead-grid |

packages/components/psammead-most-read/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-most-read",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "A component for the most read item",
   "main": "dist/index.js",
   "module": "esm/index.js",

packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap

@@ -67,6 +67,54 @@ exports[`MostReadItemWrapper should render ltr correctly with 10 items 1`] = `
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c0 {
     display: block;
@@ -711,6 +759,54 @@ exports[`MostReadItemWrapper should render rtl correctly with 10 items 1`] = `
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c0 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c0 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c0 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c0 {
     display: block;

packages/components/psammead-most-read/src/Item/index.jsx

@@ -118,7 +118,7 @@ const StyledGrid = styled(Grid).attrs({
 export const MostReadItemWrapper = ({ dir, children, columnLayout }) => (
   <StyledGrid
     {...mostReadItemGridProps(columnLayout)}
-    parentColumns={mostReadListGridProps.columns} // parentColumns is required here because on IE, this component would be rendered before it's parent therefore not receiving the parent's grid columns values so we have to explicitly pass it as a prop here so it works on IE
+    parentColumns={mostReadListGridProps(columnLayout).columns} // parentColumns is required here because on IE, this component would be rendered before it's parent therefore not receiving the parent's grid columns values so we have to explicitly pass it as a prop here so it works on IE
     dir={dir}
     forwardedAs="li"
   >