Fix "Themes" step visibility bug in IE 11 (https://github.com/woocommerce/woocommerce-admin/pull/6578)

* Fix themes are not visible in IE 11
* Add CSS class for the first 40 card items

plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md

@@ -97,6 +97,15 @@ Testing `woocommerce_navigation_intro_modal_dismissed`
 8. Navigate to WooCommerce -> Customers.
 9. Make sure that customer data has been deleted.
 
+### Fix "Themes" step visibility in IE 11 #6578
+
+1. Get an IE 11 test environment. I downloaded a trial version of Parallels Desktop on [here](https://www.parallels.com/) and IE 11 virtual machine from [developer.microsoft.com](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/)
+2. Make a zip version of this branch by running `npm run test:zip`
+3. Make a JN site -> install and activate the zip file.
+4. Open IE 11 and start OBW
+5. Confirm that the themes are displayed correctly.
+
+
 ### Fix hidden menu title on smaller screens #6562
 
 1. Enable the new navigation.

plugins/woocommerce-admin/client/ie.scss

@@ -3,3 +3,27 @@
  *
  * @format
  */
+
+.woocommerce-profile-wizard__body .woocommerce-profile-wizard__container {
+	> .woocommerce-profile-wizard__themes-tab-panel {
+		@include breakpoint( '>782px' ) {
+			.woocommerce-profile-wizard__themes {
+				@for $i from 1 through 40 {
+					.components-card:nth-child(#{$i}) {
+						margin-bottom: $gap-large;
+						@if $i % 2 == 0 {
+							grid-column: 2;
+							grid-row: $i /2;
+							margin-left: $gap-large / 2;
+						}
+						@else {
+							grid-column: 1;
+							grid-row: ($i / 2) +0.5;
+							margin-right: $gap-large / 2;
+						}
+					}
+				}
+			}
+		}
+	}
+}

plugins/woocommerce-admin/client/profile-wizard/steps/theme/style.scss

@@ -103,12 +103,13 @@ p.woocommerce-profile-wizard__themes-skip-this-step {
 	}
 
 	.components-form-file-upload {
-		flex: 1;
+		flex: 1 1 auto;
 		width: 100%;
+		display: flex;
 	}
 
 	.components-form-file-upload > .components-button {
-		flex: 1;
+		flex: 1 1 auto;
 		flex-direction: column;
 		justify-content: center;
 		margin: 0;

plugins/woocommerce-admin/readme.txt

@@ -81,6 +81,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Allow the manager role to query certain options #6577
 - Dev: Refactor profile wizard benefits step and add tests #6583
 - Fix: Delete customer data on network user deletion #6574
+- Fix: Fix Themes step visibility in IE 11 #6578
 - Fix: Fix hidden menu title on smaller screens #6562
 - Fix: Add gross sales column to CSV export #6567
 - Dev: Add filter to profile wizard steps #6564