thumbnails: Audition darker borders on typical images.

web/src/postprocess_content.ts

@@ -115,12 +115,21 @@ 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;
+                // At 20px/1em, image boxes are 200px by 80px in either
+                // horizontal or vertical orientation; 80 / 200 = 0.4
+                // We need to show more of the background color behind
+                // 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
                 // 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 has_extreme_aspect_ratio =
+                    original_width / original_height <= image_min_aspect_ratio ||
+                    original_height / original_width <= image_min_aspect_ratio;
                 const is_portrait_image = original_width <= original_height;
 
                 inline_image.setAttribute("width", `${original_width}`);
@@ -130,6 +139,10 @@ export function postprocess_content(html: string): string {
                     inline_image.classList.add("dinky-thumbnail");
                 }
 
+                if (has_extreme_aspect_ratio) {
+                    inline_image.classList.add("extreme-aspect-ratio");
+                }
+
                 if (is_portrait_image) {
                     inline_image.classList.add("portrait-thumbnail");
                 } else {

web/styles/app_variables.css

@@ -1552,10 +1552,18 @@
     );
     --color-markdown-code-link-hover: var(--color-markdown-link-hover);
     --color-background-image-thumbnail: light-dark(
+        hsl(0deg 0% 0% / 8%),
+        hsl(0deg 0% 100% / 13%)
+    );
+    --color-background-image-thumbnail-hover: light-dark(
+        hsl(0deg 0% 0% / 20%),
+        hsl(0deg 0% 100% / 25%)
+    );
+    --color-background-image-thumbnail-dinky: light-dark(
         hsl(0deg 0% 0% / 3%),
         hsl(0deg 0% 100% / 3%)
     );
-    --color-background-image-thumbnail-hover: light-dark(
+    --color-background-image-thumbnail-dinky-hover: light-dark(
         hsl(0deg 0% 0% / 15%),
         hsl(0deg 0% 100% / 15%)
     );

web/styles/rendered_markdown.css

@@ -432,6 +432,18 @@
         transition: background 0.3s ease;
         background: var(--color-background-image-thumbnail);
 
+        /* Inline videos also take the dinky color, as they
+           currently display a larger clickable area than
+           necessary. */
+        &.message_inline_video,
+        &:has(.dinky-thumbnail, .extreme-aspect-ratio) {
+            background: var(--color-background-image-thumbnail-dinky);
+
+            &:hover {
+                background: var(--color-background-image-thumbnail-dinky-hover);
+            }
+        }
+
         &:hover {
             background: var(--color-background-image-thumbnail-hover);
         }

web/tests/postprocess_content.test.cjs

@@ -150,7 +150,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         ),
         '<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">' +
+            '<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">' +
             "</a>" +
             "</div>",
     );