From: Florian Heft <flo@fam-heft.de> Date: Wed, 14 Jun 2023 08:09:21 +0000 (+0200) Subject: Fixed NSFW image blur spilling outside the preview X-Git-Url: http://these/git/%22https:/image.com/readmes/%22%7Burl%7D/%22?a=commitdiff_plain;h=14775734fa96c3882963791af10a04b57121d9c4;p=lemmy-ui.git 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 --- 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" />