From 4d15c39cd7541dae17e5092966dc6f84305076b2 Mon Sep 17 00:00:00 2001
From: Hampus <hampus@fluxer.app>
Date: Sat, 29 Aug 2026 16:04:55 +0200
Subject: [PATCH] fix(app): give mature media blur the real media dimensions
 (#2084)

---
 .../components/embeds/media/EmbedGifv.tsx      | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.tsx b/fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.tsx
index e60677ad6..a3d684eb2 100644
--- a/fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.tsx
+++ b/fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.tsx
@@ -408,7 +408,7 @@ export const EmbedGifv: FC<
 			},
 			[visibilityRef],
 		);
-		const {dimensions, style} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
+		const {dimensions} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
 		const canPlayInline = isInlinePlayableVideoSize({width: naturalWidth, height: naturalHeight});
 		const posterSource = thumbnailProxyURL && thumbnailProxyURL.length > 0 ? thumbnailProxyURL : videoProxyURL;
 		const posterURL = useMemo(() => {
@@ -534,8 +534,11 @@ export const EmbedGifv: FC<
 			safePause(video);
 		}, [shouldPlay]);
 		if (shouldBlur) {
-			const {width: _width, height: _height, ...styleWithoutDimensions} = style;
-			const blurContainerStyle = {...styleWithoutDimensions, maxWidth: '100%', width: '100%'};
+			const blurContainerStyle: React.CSSProperties = {
+				maxWidth: '100%',
+				width: remFromPx(dimensions.width),
+				...aspectRatioStyle,
+			};
 			return (
 				<div
 					ref={visibilityRef}
@@ -719,7 +722,7 @@ export const EmbedGif: FC<
 			},
 			[visibilityRef],
 		);
-		const {dimensions, style} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
+		const {dimensions} = mediaCalculator.calculate({width: naturalWidth, height: naturalHeight});
 		const {width: displayWidth, height: displayHeight} = dimensions;
 		const gifAutoPlay = useShouldAnimate({kind: 'gif'});
 		const animationPolicyAllowed = useShouldAnimate({
@@ -856,8 +859,11 @@ export const EmbedGif: FC<
 			],
 		);
 		if (shouldBlur) {
-			const {width: _width, height: _height, ...styleWithoutDimensions} = style;
-			const blurContainerStyle = {...styleWithoutDimensions, maxWidth: '100%', width: '100%'};
+			const blurContainerStyle: React.CSSProperties = {
+				maxWidth: '100%',
+				width: remFromPx(dimensions.width),
+				...aspectRatioStyle,
+			};
 			return (
 				<div
 					ref={visibilityRef}