From fff6dce8fcdc9355a255ba51e4573a09a5391fb1 Mon Sep 17 00:00:00 2001
From: Brett Jephson <brett@gitbook.io>
Date: Thu, 21 Mar 2024 11:46:46 +0000
Subject: [PATCH] RND-3192: images expanding card content beyond their width
 (#281)

* Fix for RND-3192: images expanding card content beyond their width

* Wrap Image in a size-restricting container

---------

Co-authored-by: Viktor Renkema <vrenkema@gmail.com>
---
 src/components/DocumentView/InlineImage.tsx | 54 ++++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/components/DocumentView/InlineImage.tsx b/src/components/DocumentView/InlineImage.tsx
index 24cafc897..919028da6 100644
--- a/src/components/DocumentView/InlineImage.tsx
+++ b/src/components/DocumentView/InlineImage.tsx
@@ -3,6 +3,7 @@ import assertNever from 'assert-never';
 
 import { getImageSize } from '@/lib/images';
 import { ResolvedContentRef } from '@/lib/references';
+import { tcls } from '@/lib/tailwind';
 
 import { InlineProps } from './Inline';
 import { Image } from '../utils';
@@ -21,41 +22,45 @@ export async function InlineImage(props: InlineProps<DocumentInlineImage>) {
     }
 
     return (
-        <Image
-            alt={inline.data.caption ?? ''}
-            sizes={await getImageSizes(size, src)}
-            sources={{
-                light: {
-                    src: src.href,
-                    size: src.fileDimensions,
-                },
-                dark: darkSrc
-                    ? {
-                          src: darkSrc.href,
-                          size: darkSrc.fileDimensions,
-                      }
-                    : null,
-            }}
-            priority="lazy"
-            preload
-            style={[size === 'line' ? ['max-h-[1lh]', 'h-[1lh]', 'w-auto'] : ['max-w-[300px]']]}
-            inline
-            zoom
-        />
+        /* Ensure images dont expand to the size of the container where this Image may be nested in. Now it's always nested in a size-restricted container */
+        <span className={tcls(size !== 'line' ? ['inline-flex', 'max-w-[300px]'] : null)}>
+            <Image
+                alt={inline.data.caption ?? ''}
+                sizes={await getImageSizes(size, src)}
+                sources={{
+                    light: {
+                        src: src.href,
+                        size: src.fileDimensions,
+                    },
+                    dark: darkSrc
+                        ? {
+                              src: darkSrc.href,
+                              size: darkSrc.fileDimensions,
+                          }
+                        : null,
+                }}
+                priority="lazy"
+                preload
+                style={[size === 'line' ? ['max-h-[1lh]', 'h-[1lh]', 'w-auto'] : null]}
+                inline
+                zoom
+            />
+        </span>
     );
 }
 
 async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef) {
     switch (size) {
         case 'line': {
-            // We estimate that the maximum height of the line will be 40px
-            // and from the aspect-ratio, we can deduce the width
-            const lineHeight = 40;
             const imageSize =
                 src.fileDimensions ??
                 (await getImageSize(src.href, {
                     dpr: 3,
                 }));
+            // We estimate that the maximum height of the line will be 40px
+            // and from the aspect-ratio, we can deduce the width
+            const lineHeight = 40;
+
             const aspectRatio = imageSize ? imageSize.width / imageSize.height : 1;
 
             return [
@@ -68,6 +73,7 @@ async function getImageSizes(size: 'original' | 'line', src: ResolvedContentRef)
             // The max-width is 300px
             return [
                 {
+                    // if we know the image size and it is smaller than 300px use its width
                     width: 300,
                 },
             ];