Fix most requested list item alignment for the two item layout

tristandasilva · tristandasilva · commit 09e8e9d4d8d4 · 2025-10-31T08:20:32.000-04:00
diff --git a/components/gc-most-requested/_screen-md-min.scss b/components/gc-most-requested/_screen-md-min.scss
@@ -36,11 +36,14 @@
 				display: block;
 				width: 335px;
 			}
+		}
 
-			&:nth-child(2):last-child {
-				break-after: column;
-				break-inside: avoid-column;
-				display: block;
+		// If there are only two items in the list, display them side by side, horizontally aligned
+		&:has(>li:nth-child(2):last-child) {
+			display: flex;
+
+			> li {
+				width: 50%;
 			}
 		}
 	}

Original file line number	Diff line number	Diff line change
`@@ -36,11 +36,14 @@`
`36`	`36`	`display: block;`
`37`	`37`	`width: 335px;`
`38`	`38`	`}`
	`39`	`+ }`
`39`	`40`
`40`		`- &:nth-child(2):last-child {`
`41`		`- break-after: column;`
`42`		`- break-inside: avoid-column;`
`43`		`- display: block;`
	`41`	`+ // If there are only two items in the list, display them side by side, horizontally aligned`
	`42`	`+ &:has(>li:nth-child(2):last-child) {`
	`43`	`+ display: flex;`
	`44`	`+`
	`45`	`+ > li {`
	`46`	`+ width: 50%;`
`44`	`47`	`}`
`45`	`48`	`}`
`46`	`49`	`}`