Correctly align outer sublinks and livelinks (#13087)

* Correctly align sublinks and livelinks * Apply styles only to beta containers
guardian · Jan 9, 2025 · b3567e9 · b3567e9
1 parent 6b2a749
commit b3567e9
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
@@ -1008,6 +1008,15 @@ export const Card = ({
 			</CardLayout>
 
 			<div
+				css={
+					/** If beta containers have liveblog links or sublink links in the outer position, we set flex-basis so that they sit below the image */
+					isBetaContainer &&
+					(liveUpdatesPosition === 'outer' ||
+						sublinkPosition === 'outer') &&
+					css`
+						flex-basis: 100%;
+					`
+				}
 				style={{
 					padding:
 						isMediaCard || isOnwardContent ? `0 ${space[2]}px` : 0,