use inline display to correctly placing lightbox btn

Author: marjisound

dotcom-rendering/src/components/GalleryImage.tsx

@@ -36,7 +36,8 @@ const styles = css`
 `;
 
 const galleryBodyImageStyles = css`
-	display: flex;
+	display: inline;
+	position: relative;
 	${grid.column.all}
 
 	${from.tablet} {
@@ -74,32 +75,33 @@ export const GalleryImage = ({
 
 	return (
 		<figure css={styles}>
-			<div css={galleryBodyImageStyles}>
-				<div
-					css={css`
-						position: relative;
-					`}
-				>
-					<Picture
-						alt={image.data.alt ?? ''}
-						format={format}
+			<div
+				css={galleryBodyImageStyles}
+				/**
+				 * This ensures that the image height never goes above 96vh.
+				 */
+				style={{
+					maxWidth: `calc(${width / height} * 96vh)`,
+				}}
+			>
+				<Picture
+					alt={image.data.alt ?? ''}
+					format={format}
+					role={image.role}
+					master={asset.url}
+					width={width}
+					height={height}
+					loading="lazy"
+				/>
+				{renderingTarget === 'Web' && !isUndefined(image.position) && (
+					<LightboxLink
 						role={image.role}
-						master={asset.url}
-						width={width}
-						height={height}
-						loading="lazy"
+						format={format}
+						elementId={image.elementId}
+						isMainMedia={false}
+						position={image.position}
 					/>
-					{renderingTarget === 'Web' &&
-						!isUndefined(image.position) && (
-							<LightboxLink
-								role={image.role}
-								format={format}
-								elementId={image.elementId}
-								isMainMedia={false}
-								position={image.position}
-							/>
-						)}
-				</div>
+				)}
 			</div>
 
 			<GalleryCaption

dotcom-rendering/src/components/Picture.tsx

@@ -1,12 +1,6 @@
 import { css } from '@emotion/react';
 import { breakpoints } from '@guardian/source/foundations';
-import {
-	type CSSProperties,
-	Fragment,
-	useCallback,
-	useEffect,
-	useState,
-} from 'react';
+import { Fragment, useCallback, useEffect, useState } from 'react';
 import {
 	ArticleDesign,
 	ArticleDisplay,
@@ -471,19 +465,6 @@ export const Sources = ({ sources }: { sources: ImageSource[] }) => {
 	);
 };
 
-/**
- * This ensures that the image height never goes above 96vh.
- * The ratio parameter should be width:height.
- */
-const imageMaxWidth = (
-	design: ArticleDesign,
-	ratio: number,
-	isMainMedia: boolean,
-): CSSProperties | undefined =>
-	design === ArticleDesign.Gallery && !isMainMedia
-		? { maxWidth: `calc(${ratio} * 96vh)` }
-		: undefined;
-
 const styles = ({ design }: ArticleFormat, isLightbox: boolean) => {
 	if (design === ArticleDesign.Gallery) {
 		return css(css`
@@ -595,7 +576,6 @@ export const Picture = ({
 				height={fallbackSource.width * ratio}
 				loading={Picture.disableLazyLoading ? undefined : loading}
 				css={isLightbox ? flex : block}
-				style={imageMaxWidth(format.design, 1 / ratio, isMainMedia)}
 			/>
 		</picture>
 	);