From 58f28428c907aeaf2d063ae084d6f5c697407e43 Mon Sep 17 00:00:00 2001
From: Harvey Peachey <harvey.peachey@bbc.co.uk>
Date: Tue, 10 Mar 2020 12:19:45 +0000
Subject: [PATCH 1/4] Passed in columnlayout

---
 packages/components/psammead-most-read/src/Item/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-most-read/src/Item/index.jsx b/packages/components/psammead-most-read/src/Item/index.jsx
index 7024aa30ba..aac7b3813c 100755
--- a/packages/components/psammead-most-read/src/Item/index.jsx
+++ b/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"
   >

From 53518b51ef9cd5c026a448286592e469fcfe4aa8 Mon Sep 17 00:00:00 2001
From: Harvey Peachey <harvey.peachey@bbc.co.uk>
Date: Tue, 10 Mar 2020 12:34:36 +0000
Subject: [PATCH 2/4] Updated snapshots

---
 .../Item/__snapshots__/index.test.jsx.snap    |  96 +++++
 .../List/__snapshots__/index.test.jsx.snap    | 336 ++++++++++++++++++
 2 files changed, 432 insertions(+)

diff --git a/packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap b/packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap
index 8e6c22282a..d3e7ef1b73 100644
--- a/packages/components/psammead-most-read/src/Item/__snapshots__/index.test.jsx.snap
+++ b/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;
diff --git a/packages/components/psammead-most-read/src/List/__snapshots__/index.test.jsx.snap b/packages/components/psammead-most-read/src/List/__snapshots__/index.test.jsx.snap
index 5117be14e2..883439ea4a 100644
--- a/packages/components/psammead-most-read/src/List/__snapshots__/index.test.jsx.snap
+++ b/packages/components/psammead-most-read/src/List/__snapshots__/index.test.jsx.snap
@@ -82,6 +82,54 @@ exports[`MostReadList should render with ltr bengali items with correct dir 1`]
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -757,6 +805,54 @@ exports[`MostReadList should render with ltr burmese items with correct dir 1`]
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -1425,6 +1521,54 @@ exports[`MostReadList should render with ltr news items with a max of one column
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -2088,6 +2232,54 @@ exports[`MostReadList should render with ltr news items with a max of two column
   padding: 0;
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -2764,6 +2956,54 @@ exports[`MostReadList should render with ltr news items with a multi column layo
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -3439,6 +3679,54 @@ exports[`MostReadList should render with ltr news items with correct dir 1`] = `
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;
@@ -4114,6 +4402,54 @@ exports[`MostReadList should render with rtl arabic items with correct dir 1`] =
   }
 }
 
+@media (max-width:14.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:15rem) and (max-width:24.9375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:25rem) and (max-width:37.4375rem) {
+  .c2 {
+    width: calc(100%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:37.5rem) and (max-width:62.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:63rem) and (max-width:79.9375rem) {
+  .c2 {
+    width: calc(50%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
+@media (min-width:80rem) {
+  .c2 {
+    width: calc(20%);
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+
 @supports (display:grid) {
   .c2 {
     display: block;

From 33f6e57a14fb563ef350e541e2c8a7b43a8c52ba Mon Sep 17 00:00:00 2001
From: Harvey Peachey <harvey.peachey@bbc.co.uk>
Date: Tue, 10 Mar 2020 12:34:56 +0000
Subject: [PATCH 3/4] Updated changelog and package files

---
 packages/components/psammead-most-read/CHANGELOG.md      | 1 +
 packages/components/psammead-most-read/package-lock.json | 2 +-
 packages/components/psammead-most-read/package.json      | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/components/psammead-most-read/CHANGELOG.md b/packages/components/psammead-most-read/CHANGELOG.md
index a0158c5d67..0f00b4ea5c 100644
--- a/packages/components/psammead-most-read/CHANGELOG.md
+++ b/packages/components/psammead-most-read/CHANGELOG.md
@@ -3,6 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
+| 4.0.1 | [PR#3201](https://github.com/bbc/psammead/pull/xxxx) 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 |
diff --git a/packages/components/psammead-most-read/package-lock.json b/packages/components/psammead-most-read/package-lock.json
index 3c6ed2fed3..2f24cfbb38 100644
--- a/packages/components/psammead-most-read/package-lock.json
+++ b/packages/components/psammead-most-read/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-most-read",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/components/psammead-most-read/package.json b/packages/components/psammead-most-read/package.json
index 0d4eded28e..a32f575c6d 100644
--- a/packages/components/psammead-most-read/package.json
+++ b/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",

From e632554cee2dd8fa18a8909eb9efe1ffb32a80a7 Mon Sep 17 00:00:00 2001
From: Harvey Peachey <harvey.peachey@bbc.co.uk>
Date: Tue, 10 Mar 2020 12:40:09 +0000
Subject: [PATCH 4/4] Added PR number to changelog

---
 packages/components/psammead-most-read/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/psammead-most-read/CHANGELOG.md b/packages/components/psammead-most-read/CHANGELOG.md
index 0f00b4ea5c..d0829845db 100644
--- a/packages/components/psammead-most-read/CHANGELOG.md
+++ b/packages/components/psammead-most-read/CHANGELOG.md
@@ -3,7 +3,7 @@
 <!-- prettier-ignore -->
 | Version | Description |
 |---------|-------------|
-| 4.0.1 | [PR#3201](https://github.com/bbc/psammead/pull/xxxx) Fixed most-read IE layout bug |
+| 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 |