From 14775734fa96c3882963791af10a04b57121d9c4 Mon Sep 17 00:00:00 2001 From: Florian Heft <flo@fam-heft.de> Date: Wed, 14 Jun 2023 10:09:21 +0200 Subject: [PATCH] Fixed NSFW image blur spilling outside the preview * Hide overflow of wrapping picture element to contain the blur of the inner img element. * This aligns the visible image area to the clickable area. * fixes #1245 --- src/assets/css/main.css | 3 +++ src/shared/components/common/pictrs-image.tsx | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 1c45341..a150522 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -434,3 +434,6 @@ br.big { em-emoji-picker { width: 100%; } +.overflow-hidden { + overflow: hidden; +} diff --git a/src/shared/components/common/pictrs-image.tsx b/src/shared/components/common/pictrs-image.tsx index 27d1cc5..f975e4a 100644 --- a/src/shared/components/common/pictrs-image.tsx +++ b/src/shared/components/common/pictrs-image.tsx @@ -22,7 +22,7 @@ export class PictrsImage extends Component<PictrsImageProps, any> { render() { return ( - <picture> + <picture className="d-inline-block overflow-hidden"> <source srcSet={this.src("webp")} type="image/webp" /> <source srcSet={this.props.src} /> <source srcSet={this.src("jpg")} type="image/jpeg" /> -- 2.44.1