thumbnails: Constrain thumbnails to 10em height only.

web/src/postprocess_content.ts

@@ -126,12 +126,10 @@ export function postprocess_content(html: string): string {
                 // these extremely tall or extremely wide images, and
                 // use a subtler background color than on other images
                 const image_min_aspect_ratio = 0.4;
-                // "Dinky" images are those that are smaller than the
+                // "Dinky" images are those that are shorter than the
-                // 10em box reserved for thumbnails
+                // 10em height reserved for thumbnails
                 const image_box_em = 10;
-                const is_dinky_image =
+                const is_dinky_image = original_height / font_size_in_use <= image_box_em;
-                    original_width / font_size_in_use <= image_box_em &&
-                    original_height / font_size_in_use <= image_box_em;
                 const has_extreme_aspect_ratio =
                     original_width / original_height <= image_min_aspect_ratio ||
                     original_height / original_width <= image_min_aspect_ratio;
@@ -140,8 +138,22 @@ export function postprocess_content(html: string): string {
                 inline_image.setAttribute("width", `${original_width}`);
                 inline_image.setAttribute("height", `${original_height}`);
 
+                // Despite setting `width` and `height` values above, the
+                // flexbox gallery collapses until images have loaded. We
+                // therefore have to avoid the layout shift that would
+                // otherwise cause by setting the only the width attribute
+                // here. And by setting this value in ems, we ensure that
+                // images scale as users adjust the information-density
+                // settings.
+                inline_image.style.setProperty(
+                    "width",
+                    `${(image_box_em * font_size_in_use * original_width) / original_height / font_size_in_use}em`,
+                );
+
                 if (is_dinky_image) {
                     inline_image.classList.add("dinky-thumbnail");
+                    // For dinky images, we just set the original width
+                    inline_image.style.setProperty("width", `${original_width}px`);
                 }
 
                 if (has_extreme_aspect_ratio) {

web/styles/rendered_markdown.css

@@ -470,7 +470,7 @@
                but further care is needed because different layout mechanisms,
                including inline-block, can ignore those dimensions. For that
                reason, we enforce a minimum 4em square for "dinky" images,
-               and a maximum 10em square for all others.
+               and set the scaled-down width on all others via JavaScript.
 
                If there are several images next to each other, we display
                them in a grid format; the same considerations require
@@ -483,34 +483,19 @@
             min-width: 4em;
             min-height: 4em;
 
-            /* Constrain height and width to a 10em box. */
+            /* Constrain height to 10em, but otherwise keep
-            max-width: 10em;
+               the width to the size of the gallery, and
+               therefore the message area. */
             max-height: 10em;
+            max-width: 100%;
 
-            /* Allow height and width to grow as needed... */
+            /* Allow height and width to grow as needed, though
+               note we set the scaled-down `width` property on
+               each image in JavaScript to keep flexbox from
+               collapsing to the min-height and min-width values
+               set above... */
             width: auto;
             height: auto;
-
-            /* But set specific widths based on the image's
-               orientation. */
-            &.landscape-thumbnail {
-                width: 10em;
-
-                /* For dinky thumbnails (those whose dimensions are
-                   less than 10em on both sides), we set a 4em
-                   thumbnail. */
-                &.dinky-thumbnail {
-                    width: 4em;
-                }
-            }
-
-            &.portrait-thumbnail {
-                height: 10em;
-
-                &.dinky-thumbnail {
-                    height: 4em;
-                }
-            }
         }
 
         img.image-loading-placeholder {

web/tests/postprocess_content.test.cjs

@@ -120,12 +120,12 @@ run_test("inline_image_galleries", ({override}) => {
             '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="2000" loading="lazy">' +
+            '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="2000" style="width: 5em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" width="2000" height="1000" loading="lazy">' +
+            '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" width="2000" height="1000" style="width: 20em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>" +
@@ -133,7 +133,7 @@ run_test("inline_image_galleries", ({override}) => {
             '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="1000" loading="lazy">' +
+            '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="1000" style="width: 10em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -194,7 +194,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" width="3264" height="2448" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -212,7 +212,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" width="100" height="200" loading="lazy">' +
+            '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" width="100" height="200" style="width: 5em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -230,7 +230,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" width="1" height="10" loading="lazy">' +
+            '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" width="1" height="10" style="width: 1px;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -249,7 +249,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -268,7 +268,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image message_inline_animated_image_still">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -286,7 +286,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message_inline_image message_inline_animated_image_still">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
             "</a>" +
             "</div>" +
             "</div>",