thumbnails: Handle dinky thumbnail images.

Fixes: #31502

web/src/postprocess_content.ts

@@ -114,11 +114,22 @@ export function postprocess_content(html: string): string {
 
                 const original_width = Number(original_dimensions[0]);
                 const original_height = Number(original_dimensions[1]);
+                const font_size_in_use = user_settings.web_font_size_px;
+                // "Dinky" images are those that are smaller than the
+                // 10em box reserved for thumbnails
+                const image_box_em = 10;
+                const is_dinky_image =
+                    original_width / font_size_in_use <= image_box_em &&
+                    original_height / font_size_in_use <= image_box_em;
                 const is_portrait_image = original_width <= original_height;
 
                 inline_image.setAttribute("width", `${original_width}`);
                 inline_image.setAttribute("height", `${original_height}`);
 
+                if (is_dinky_image) {
+                    inline_image.classList.add("dinky-thumbnail");
+                }
+
                 if (is_portrait_image) {
                     inline_image.classList.add("portrait-thumbnail");
                 } else {

web/styles/rendered_markdown.css

@@ -443,6 +443,7 @@
 
         & .media-image-element {
             display: block;
+            object-fit: scale-down;
 
             /* Sizing CSS for inline images requires care, because images load
                asynchronously, and browsers will unfortunately jump your
@@ -481,10 +482,21 @@
                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;
+                }
             }
         }
 

web/tests/postprocess_content.test.cjs

@@ -10,7 +10,7 @@ const thumbnail = mock_esm("../src/thumbnail");
 const {postprocess_content} = zrequire("postprocess_content");
 const {initialize_user_settings} = zrequire("user_settings");
 
-const user_settings = {};
+const user_settings = {web_font_size_px: 16};
 initialize_user_settings({user_settings});
 
 run_test("postprocess_content", () => {
@@ -139,6 +139,22 @@ run_test("message_inline_animated_image_still", ({override}) => {
             "</div>",
     );
 
+    // Test for dinky thumbnails
+    assert.equal(
+        postprocess_content(
+            '<div class="message_inline_image">' +
+                '<a href="/user_uploads/path/to/image.png" title="image.png">' +
+                '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp">' +
+                "</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="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail portrait-thumbnail" width="1" height="10" loading="lazy">' +
+            "</a>" +
+            "</div>",
+    );
+
     // Now verify the behavior for animated images.
     override(user_settings, "web_animate_image_previews", "always");
     assert.equal(