Set height to 100% on very small screens

domlander · domlander · commit 80387ec9d510 · 2025-08-12T17:52:17.000+01:00
diff --git a/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx b/dotcom-rendering/src/components/Masthead/HighlightsCard.tsx
@@ -38,6 +38,7 @@ const container = css`
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
+	height: 100%;
 	column-gap: ${space[2]}px;
 	/** Relative positioning is required to absolutely position the card link overlay */
 	position: relative;
@@ -57,10 +58,8 @@ const container = css`
 	}
 	${between.mobileMedium.and.tablet} {
 		min-height: 194px;
-		height: 100%;
 	}
 	${from.tablet} {
-		height: 100%;
 		width: 160px;
 		padding: 10px 10px 0 10px;
 	}

Original file line number	Diff line number	Diff line change
@@ -38,6 +38,7 @@ const container = css`
`38`	`38`	`display: flex;`
`39`	`39`	`flex-direction: column;`
`40`	`40`	`justify-content: space-between;`
	`41`	`+ height: 100%;`
`41`	`42`	`column-gap: ${space[2]}px;`
`42`	`43`	`/** Relative positioning is required to absolutely position the card link overlay */`
`43`	`44`	`position: relative;`
@@ -57,10 +58,8 @@ const container = css`
`57`	`58`	`}`
`58`	`59`	`${between.mobileMedium.and.tablet} {`
`59`	`60`	`min-height: 194px;`
`60`		`- height: 100%;`
`61`	`61`	`}`
`62`	`62`	`${from.tablet} {`
`63`		`- height: 100%;`
`64`	`63`	`width: 160px;`
`65`	`64`	`padding: 10px 10px 0 10px;`
`66`	`65`	`}`