From 47fe887c0a8bc20df798e131f18b622741caf629 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Wed, 9 Sep 2026 12:48:12 +0100 Subject: [PATCH 1/4] Update Labs immersive main media and typography --- .../src/components/Standfirst.tsx | 9 ++++ .../src/layouts/StandardLayoutArticleGrid.tsx | 44 ++++++++++++++----- 2 files changed, 42 insertions(+), 11 deletions(-) diff --git a/dotcom-rendering/src/components/Standfirst.tsx b/dotcom-rendering/src/components/Standfirst.tsx index da5fb9130b1..71e144a5223 100644 --- a/dotcom-rendering/src/components/Standfirst.tsx +++ b/dotcom-rendering/src/components/Standfirst.tsx @@ -417,6 +417,15 @@ export const Standfirst = ({ format, standfirst, layoutType }: Props) => { layoutType?.startsWith('immersive') ? immersiveGridOverrides : undefined, + layoutType?.startsWith('immersive') === true && + format.theme === ArticleSpecial.Labs && + css` + font-weight: 500; + + ${from.tablet} { + font-weight: 500; + } + `, ]} className={ format.design === ArticleDesign.Interactive diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 77e974437d3..1ce205e7516 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -61,6 +61,7 @@ const stretchLines = css` const immersiveMediaBelowDesktop = ( headlineBackground: string, isMainMediaImage: boolean, + isFixedHeightImage: boolean, ) => css` ${until.desktop} { position: relative; @@ -78,18 +79,24 @@ const immersiveMediaBelowDesktop = ( position: absolute; left: 0; right: 0; - bottom: 0; - height: ${isMainMediaImage - ? 'min(60%, calc(200% - 120vw + 30px))' - : 'min(60%, 144px)'}; + bottom: ${isFixedHeightImage ? '-1px' : '0'}; + height: ${isFixedHeightImage + ? '180px' + : isMainMediaImage + ? 'min(60%, calc(200% - 120vw + 30px))' + : 'min(60%, 144px)'}; z-index: ${getZIndex('mediaOverlay')}; background: linear-gradient( to bottom, - rgba(0, 0, 0, 0.08), - ${headlineBackground} 72% + rgba(0, 0, 0, ${isFixedHeightImage ? '0' : '0.08'}), + ${headlineBackground} ${isFixedHeightImage ? '100%' : '72%'} ); backdrop-filter: blur(12px); - mask-image: linear-gradient(to bottom, transparent 40%, black 60%); + mask-image: linear-gradient( + to bottom, + transparent ${isFixedHeightImage ? '0%' : '40%'}, + black 60% + ); pointer-events: none; } } @@ -185,6 +192,7 @@ export const StandardLayoutArticleGrid = ({ const isMainMediaImage = mainMedia?._type === 'model.dotcomrendering.pageElements.ImageBlockElement'; + const isFixedHeightImage = isLabs && isImmersive && isMainMediaImage; const mainMediaUrl: string | undefined = isMainMediaImage ? mainMedia.media.allImages[0]?.url : undefined; @@ -197,13 +205,13 @@ export const StandardLayoutArticleGrid = ({ const immersiveHeaderHeight = minHeaderHeightPx + (isLabs ? LABS_HEADER_HEIGHT : 0); const immersiveMediaRowHeight = isMainMediaImage - ? '60vw' + ? 'auto' : `max(calc(80vh - ${immersiveHeaderHeight}px), calc(25rem - ${immersiveHeaderHeight}px))`; const layoutType = getLayoutType({ isImmersive, isFeature, - orientation: mainMediaOrientation, + orientation: isFixedHeightImage ? 'landscape' : mainMediaOrientation, isMedia, isShowcase, }); @@ -233,7 +241,6 @@ export const StandardLayoutArticleGrid = ({ )}; } } - /* Anchor the title consistently while wrapped text extends the media below it. */ grid-template-rows: ${immersiveMediaRowHeight} repeat( 6, auto @@ -269,7 +276,8 @@ export const StandardLayoutArticleGrid = ({ ? css` ${from.desktop} { align-self: start; - ${mainMediaAspectRatio != null && + ${!isFixedHeightImage && + mainMediaAspectRatio != null && `aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`} ${layoutType === 'immersiveLandscape' && `margin-left: -20px; @@ -279,7 +287,21 @@ export const StandardLayoutArticleGrid = ({ ${immersiveMediaBelowDesktop( headlineBackgroundImmersive, isMainMediaImage, + isFixedHeightImage, )} + + ${isFixedHeightImage && + css` + position: relative; + height: 469px; + overflow: hidden; + background-color: ${headlineBackgroundImmersive}; + + > div { + position: absolute; + inset: 0; + } + `} ` : undefined } From b4df25e9709d25f29ecdcc8319fcbb54554af388 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 14 Sep 2026 10:46:12 +0100 Subject: [PATCH 2/4] Fixed height below desktop only --- .../src/layouts/StandardLayoutArticleGrid.tsx | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 1ce205e7516..cc324167638 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -211,7 +211,7 @@ export const StandardLayoutArticleGrid = ({ const layoutType = getLayoutType({ isImmersive, isFeature, - orientation: isFixedHeightImage ? 'landscape' : mainMediaOrientation, + orientation: mainMediaOrientation, isMedia, isShowcase, }); @@ -276,8 +276,7 @@ export const StandardLayoutArticleGrid = ({ ? css` ${from.desktop} { align-self: start; - ${!isFixedHeightImage && - mainMediaAspectRatio != null && + ${mainMediaAspectRatio != null && `aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`} ${layoutType === 'immersiveLandscape' && `margin-left: -20px; @@ -292,14 +291,16 @@ export const StandardLayoutArticleGrid = ({ ${isFixedHeightImage && css` - position: relative; - height: 469px; - overflow: hidden; - background-color: ${headlineBackgroundImmersive}; + ${until.desktop} { + position: relative; + height: 469px; + overflow: hidden; + background-color: ${headlineBackgroundImmersive}; - > div { - position: absolute; - inset: 0; + > div { + position: absolute; + inset: 0; + } } `} ` From 446f1014a738fbb9d73087af2a3ee6ed1c69319a Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 14 Sep 2026 11:11:29 +0100 Subject: [PATCH 3/4] Set 469px as minimum height not fixed --- .../src/layouts/StandardLayoutArticleGrid.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index cc324167638..22169d521b7 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -61,7 +61,7 @@ const stretchLines = css` const immersiveMediaBelowDesktop = ( headlineBackground: string, isMainMediaImage: boolean, - isFixedHeightImage: boolean, + hasMinimumImageHeight: boolean, ) => css` ${until.desktop} { position: relative; @@ -79,8 +79,8 @@ const immersiveMediaBelowDesktop = ( position: absolute; left: 0; right: 0; - bottom: ${isFixedHeightImage ? '-1px' : '0'}; - height: ${isFixedHeightImage + bottom: ${hasMinimumImageHeight ? '-1px' : '0'}; + height: ${hasMinimumImageHeight ? '180px' : isMainMediaImage ? 'min(60%, calc(200% - 120vw + 30px))' @@ -88,13 +88,13 @@ const immersiveMediaBelowDesktop = ( z-index: ${getZIndex('mediaOverlay')}; background: linear-gradient( to bottom, - rgba(0, 0, 0, ${isFixedHeightImage ? '0' : '0.08'}), - ${headlineBackground} ${isFixedHeightImage ? '100%' : '72%'} + rgba(0, 0, 0, ${hasMinimumImageHeight ? '0' : '0.08'}), + ${headlineBackground} ${hasMinimumImageHeight ? '100%' : '72%'} ); backdrop-filter: blur(12px); mask-image: linear-gradient( to bottom, - transparent ${isFixedHeightImage ? '0%' : '40%'}, + transparent ${hasMinimumImageHeight ? '0%' : '40%'}, black 60% ); pointer-events: none; @@ -192,7 +192,7 @@ export const StandardLayoutArticleGrid = ({ const isMainMediaImage = mainMedia?._type === 'model.dotcomrendering.pageElements.ImageBlockElement'; - const isFixedHeightImage = isLabs && isImmersive && isMainMediaImage; + const hasMinimumImageHeight = isLabs && isImmersive && isMainMediaImage; const mainMediaUrl: string | undefined = isMainMediaImage ? mainMedia.media.allImages[0]?.url : undefined; @@ -286,14 +286,16 @@ export const StandardLayoutArticleGrid = ({ ${immersiveMediaBelowDesktop( headlineBackgroundImmersive, isMainMediaImage, - isFixedHeightImage, + hasMinimumImageHeight, )} - ${isFixedHeightImage && + ${hasMinimumImageHeight && css` ${until.desktop} { position: relative; - height: 469px; + min-height: 469px; + ${mainMediaAspectRatio != null && + `aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`} overflow: hidden; background-color: ${headlineBackgroundImmersive}; From 695f3f2c0e83852326666f1176af45c10ee33d99 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 14 Sep 2026 11:28:51 +0100 Subject: [PATCH 4/4] Update StandardLayoutArticleGrid.tsx --- dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx index 22169d521b7..9b4b75d3388 100644 --- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx +++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx @@ -293,6 +293,8 @@ export const StandardLayoutArticleGrid = ({ css` ${until.desktop} { position: relative; + width: 100%; + min-width: 0; min-height: 469px; ${mainMediaAspectRatio != null && `aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`}