From 39ce5768a4bcaf32e834ceb0e66103e3713b27c7 Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Fri, 19 Sep 2025 16:48:45 +0100 Subject: [PATCH 1/5] Fix lightbox click area bug galleries --- dotcom-rendering/src/components/GalleryImage.tsx | 15 ++++++--------- .../src/components/MainMediaGallery.tsx | 1 + 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/GalleryImage.tsx b/dotcom-rendering/src/components/GalleryImage.tsx index b1def8d183d..5f8a3fd63a3 100644 --- a/dotcom-rendering/src/components/GalleryImage.tsx +++ b/dotcom-rendering/src/components/GalleryImage.tsx @@ -75,17 +75,14 @@ export const GalleryImage = ({ return null; } + const boundedImageStyles = css` + ${galleryBodyImageStyles}; + max-width: calc(${width / height} * 96vh); + `; + return (
-
+
{renderingTarget === 'Apps' ? ( Date: Fri, 19 Sep 2025 17:10:48 +0100 Subject: [PATCH 2/5] Switch --- dotcom-rendering/src/components/GalleryImage.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/GalleryImage.tsx b/dotcom-rendering/src/components/GalleryImage.tsx index 5f8a3fd63a3..b1def8d183d 100644 --- a/dotcom-rendering/src/components/GalleryImage.tsx +++ b/dotcom-rendering/src/components/GalleryImage.tsx @@ -75,14 +75,17 @@ export const GalleryImage = ({ return null; } - const boundedImageStyles = css` - ${galleryBodyImageStyles}; - max-width: calc(${width / height} * 96vh); - `; - return (
-
+
{renderingTarget === 'Apps' ? ( Date: Mon, 22 Sep 2025 12:09:58 +0100 Subject: [PATCH 3/5] Add z-index to headline --- dotcom-rendering/src/components/ArticleHeadline.tsx | 2 ++ dotcom-rendering/src/components/MainMediaGallery.tsx | 1 + 2 files changed, 3 insertions(+) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 88ff86f6230..002f84fc3d1 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -397,6 +397,8 @@ const galleryStyles = css` ${grid.between('grid-start', 'centre-column-end')} grid-row: 7/9; + position: relative; + z-index: 2; ${from.tablet} { ${grid.between('centre-column-start', 'grid-end')}; diff --git a/dotcom-rendering/src/components/MainMediaGallery.tsx b/dotcom-rendering/src/components/MainMediaGallery.tsx index 923386d31e0..7134d2958d7 100644 --- a/dotcom-rendering/src/components/MainMediaGallery.tsx +++ b/dotcom-rendering/src/components/MainMediaGallery.tsx @@ -22,6 +22,7 @@ const styles = css` position: relative; height: calc(80vh - 48px); grid-row: 1/8; + z-index: 0; ${from.desktop} { height: calc(100vh - 48px); } From a95722bc8cee86b5e7c1412dca8729f099889a8c Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 22 Sep 2025 13:09:09 +0100 Subject: [PATCH 4/5] use getZIndex --- dotcom-rendering/src/components/ArticleHeadline.tsx | 2 +- dotcom-rendering/src/components/MainMediaGallery.tsx | 3 ++- dotcom-rendering/src/components/SeriesSectionLink.tsx | 3 +++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleHeadline.tsx b/dotcom-rendering/src/components/ArticleHeadline.tsx index 002f84fc3d1..8a27496366f 100644 --- a/dotcom-rendering/src/components/ArticleHeadline.tsx +++ b/dotcom-rendering/src/components/ArticleHeadline.tsx @@ -398,7 +398,7 @@ const galleryStyles = css` grid-row: 7/9; position: relative; - z-index: 2; + z-index: ${getZIndex('articleHeadline')}; ${from.tablet} { ${grid.between('centre-column-start', 'grid-end')}; diff --git a/dotcom-rendering/src/components/MainMediaGallery.tsx b/dotcom-rendering/src/components/MainMediaGallery.tsx index 7134d2958d7..c1a1830f709 100644 --- a/dotcom-rendering/src/components/MainMediaGallery.tsx +++ b/dotcom-rendering/src/components/MainMediaGallery.tsx @@ -3,6 +3,7 @@ import { isUndefined } from '@guardian/libs'; import { from } from '@guardian/source/foundations'; import { grid } from '../grid'; import { type ArticleFormat } from '../lib/articleFormat'; +import { getZIndex } from '../lib/getZIndex'; import { getImage } from '../lib/image'; import { type ImageBlockElement } from '../types/content'; import { type RenderingTarget } from '../types/renderingTarget'; @@ -22,7 +23,7 @@ const styles = css` position: relative; height: calc(80vh - 48px); grid-row: 1/8; - z-index: 0; + z-index: ${getZIndex('mainMedia')}; ${from.desktop} { height: calc(100vh - 48px); } diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index 4ffed2d618f..367b52ae7a9 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -19,6 +19,7 @@ import { type ArticleFormat, ArticleSpecial, } from '../lib/articleFormat'; +import { getZIndex } from '../lib/getZIndex'; import { palette as themePalette } from '../palette'; import type { TagType } from '../types/tag'; import { Hide } from './Hide'; @@ -366,6 +367,8 @@ export const SeriesSectionLink = ({ background-color: ${themePalette( '--series-title-background', )}; + position: relative; + z-index: ${getZIndex('articleHeadline')}; `, format.design === ArticleDesign.Gallery && css` From 0fbcc809bacfdbdbf0002f4006169863e9467a3a Mon Sep 17 00:00:00 2001 From: DanielCliftonGuardian <110032454+DanielCliftonGuardian@users.noreply.github.com> Date: Mon, 22 Sep 2025 14:24:54 +0100 Subject: [PATCH 5/5] use getZIndex in the right place --- dotcom-rendering/src/components/SeriesSectionLink.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/SeriesSectionLink.tsx b/dotcom-rendering/src/components/SeriesSectionLink.tsx index 367b52ae7a9..c76e79027f9 100644 --- a/dotcom-rendering/src/components/SeriesSectionLink.tsx +++ b/dotcom-rendering/src/components/SeriesSectionLink.tsx @@ -367,12 +367,12 @@ export const SeriesSectionLink = ({ background-color: ${themePalette( '--series-title-background', )}; - position: relative; - z-index: ${getZIndex('articleHeadline')}; `, format.design === ArticleDesign.Gallery && css` display: inline-block; + position: relative; + z-index: ${getZIndex('articleHeadline')}; `, format.display === ArticleDisplay.Immersive && css`