UX: prevent images and lightboxes from extending outside blockquotes (#7262)

UX: prevent images and lightboxes from extending outside blockquotes (#7262)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 833ea34..847c0dc 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -203,6 +203,15 @@ aside.quote {
   }
 }
 
+blockquote {
+  // due to #image-sizing-hack large images and lightboxes extend past the
+  // limits blockquotes. Since #image-sizing-hack is inline, we need to use
+  // !important here otherwise it won't work.
+  img {
+    max-width: 100% !important;
+  }
+}
+
 .quote-controls,
 .quote-controls .d-icon {
   color: dark-light-choose($primary-low-mid, $secondary-high);

GitHub sha: 095ee6ac

we are going to get jitter now? no?

1 Like

There shouldn’t be any jitter as far as I can tell because I’m not touching the height. That’s still defined either by the tag attributes or the height we set in the internal style tag for image sizing.

However, since we’re ok with CSS vars, I will work on implementing that today and remove this rule.

1 Like

But I assume it will either distort the image OR jitter while it figures out the height no?

1 Like

Yes, the compromise is that the image aspect ratio is not preserved. The height never changes.

However, since we have:

.lightbox-wrapper img {
  object-fit: cover;
  object-position: top;
}

the image is “zoomed in” rather than being squashed / stretched. At least in the case of lightboxes.

We can revert this until the var fix is in if you prefer :+1:

2 Likes

What is the status here?