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 1c45341d..a150522c 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 27d1cc5f..f975e4ac 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" />