Fixed NSFW image blur spilling outside the preview
authorFlorian Heft <flo@fam-heft.de>
Wed, 14 Jun 2023 08:09:21 +0000 (10:09 +0200)
committerFlorian Heft <flo@fam-heft.de>
Wed, 14 Jun 2023 08:11:27 +0000 (10:11 +0200)
* 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
src/shared/components/common/pictrs-image.tsx

index 1c45341d53d21016b3110b7ea66cf7a54d971cb8..a150522cc8985947b009def19334037e0381e299 100644 (file)
@@ -434,3 +434,6 @@ br.big {
 em-emoji-picker {
   width: 100%;
 }
+.overflow-hidden {
+  overflow: hidden;
+}
index 27d1cc5fcf79cbd5e6b1bfe451a3df020dec7aac..f975e4ace77e34b14a40607699b9454b36a0ea4f 100644 (file)
@@ -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" />