From e03ac4394e83feec0e91900e5b9b7e17abc5a47b Mon Sep 17 00:00:00 2001
From: automated-signal <37887102+automated-signal@users.noreply.github.com>
Date: Wed, 16 Jul 2025 15:11:12 -0500
Subject: [PATCH] Increase max displayable image dimensions

Co-authored-by: trevor-signal <131492920+trevor-signal@users.noreply.github.com>
---
 ts/components/conversation/GIF.tsx       |  4 +--
 ts/components/conversation/ImageGrid.tsx |  4 +--
 ts/components/conversation/Message.tsx   |  4 +--
 ts/types/Attachment.ts                   | 33 +++++++++++++++---------
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/ts/components/conversation/GIF.tsx b/ts/components/conversation/GIF.tsx
index fc6b15b185..1fbb9f9748 100644
--- a/ts/components/conversation/GIF.tsx
+++ b/ts/components/conversation/GIF.tsx
@@ -10,7 +10,7 @@ import type { LocalizerType, ThemeType } from '../../types/Util';
 import type { AttachmentForUIType } from '../../types/Attachment';
 import {
   hasNotResolved,
-  getImageDimensions,
+  getImageDimensionsForTimeline,
   defaultBlurHash,
   isDownloadable,
 } from '../../types/Attachment';
@@ -65,7 +65,7 @@ export function GIF(props: Props): JSX.Element {
   const tapToPlay = useReducedMotion() || _forceTapToPlay;
 
   const videoRef = useRef<HTMLVideoElement | null>(null);
-  const { height, width } = getImageDimensions(attachment, size);
+  const { height, width } = getImageDimensionsForTimeline(attachment, size);
 
   const [repeatCount, setRepeatCount] = useState(0);
   const [playTime, setPlayTime] = useState(MAX_GIF_TIME);
diff --git a/ts/components/conversation/ImageGrid.tsx b/ts/components/conversation/ImageGrid.tsx
index 3257e957c5..3e90f4352e 100644
--- a/ts/components/conversation/ImageGrid.tsx
+++ b/ts/components/conversation/ImageGrid.tsx
@@ -11,7 +11,7 @@ import type {
 import {
   areAllAttachmentsVisual,
   getAlt,
-  getImageDimensions,
+  getImageDimensionsForTimeline,
   getThumbnailUrl,
   getUrl,
   isDownloadable,
@@ -189,7 +189,7 @@ export function ImageGrid({
   });
 
   if (attachments.length === 1 || !areAllAttachmentsVisual(attachments)) {
-    const { height, width } = getImageDimensions(
+    const { height, width } = getImageDimensionsForTimeline(
       attachments[0],
       isSticker ? stickerSize : undefined
     );
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index ccbb646067..84d1fc9a31 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -61,7 +61,7 @@ import {
   canDisplayImage,
   getExtensionForDisplay,
   getGridDimensions,
-  getImageDimensions,
+  getImageDimensionsForTimeline,
   hasImage,
   hasVideoScreenshot,
   isAudio,
@@ -2622,7 +2622,7 @@ export class Message extends React.PureComponent<Props, State> {
       firstLinkPreview.image &&
       shouldUseFullSizeLinkPreviewImage(firstLinkPreview)
     ) {
-      const dimensions = getImageDimensions(firstLinkPreview.image);
+      const dimensions = getImageDimensionsForTimeline(firstLinkPreview.image);
       if (dimensions) {
         return dimensions.width;
       }
diff --git a/ts/types/Attachment.ts b/ts/types/Attachment.ts
index 97a160061c..4dddd719fe 100644
--- a/ts/types/Attachment.ts
+++ b/ts/types/Attachment.ts
@@ -48,11 +48,13 @@ import { missingCaseError } from '../util/missingCaseError';
 
 const logging = createLogger('Attachment');
 
-const MAX_WIDTH = 300;
-const MAX_HEIGHT = MAX_WIDTH * 1.5;
-const MIN_WIDTH = 200;
-const MIN_HEIGHT = 50;
+const MAX_TIMELINE_IMAGE_WIDTH = 300;
+const MAX_TIMELINE_IMAGE_HEIGHT = MAX_TIMELINE_IMAGE_WIDTH * 1.5;
+const MIN_TIMELINE_IMAGE_WIDTH = 200;
+const MIN_TIMELINE_IMAGE_HEIGHT = 50;
 
+const MAX_DISPLAYABLE_IMAGE_WIDTH = 8192;
+const MAX_DISPLAYABLE_IMAGE_HEIGHT = 8192;
 // Used for display
 
 export class AttachmentSizeError extends Error {}
@@ -706,10 +708,10 @@ export function canDisplayImage(
   return Boolean(
     height &&
       height > 0 &&
-      height <= 4096 &&
+      height <= MAX_DISPLAYABLE_IMAGE_HEIGHT &&
       width &&
       width > 0 &&
-      width <= 4096
+      width <= MAX_DISPLAYABLE_IMAGE_WIDTH
   );
 }
 
@@ -885,26 +887,33 @@ type DimensionsType = {
   width: number;
 };
 
-export function getImageDimensions(
+export function getImageDimensionsForTimeline(
   attachment: Pick<AttachmentType, 'width' | 'height'>,
   forcedWidth?: number
 ): DimensionsType {
   const { height, width } = attachment;
   if (!height || !width) {
     return {
-      height: MIN_HEIGHT,
-      width: MIN_WIDTH,
+      height: MIN_TIMELINE_IMAGE_HEIGHT,
+      width: MIN_TIMELINE_IMAGE_WIDTH,
     };
   }
 
   const aspectRatio = height / width;
   const targetWidth =
-    forcedWidth || Math.max(Math.min(MAX_WIDTH, width), MIN_WIDTH);
+    forcedWidth ||
+    Math.max(
+      Math.min(MAX_TIMELINE_IMAGE_WIDTH, width),
+      MIN_TIMELINE_IMAGE_WIDTH
+    );
   const candidateHeight = Math.round(targetWidth * aspectRatio);
 
   return {
     width: targetWidth,
-    height: Math.max(Math.min(MAX_HEIGHT, candidateHeight), MIN_HEIGHT),
+    height: Math.max(
+      Math.min(MAX_TIMELINE_IMAGE_HEIGHT, candidateHeight),
+      MIN_TIMELINE_IMAGE_HEIGHT
+    ),
   };
 }
 
@@ -938,7 +947,7 @@ export function getGridDimensions(
   }
 
   if (attachments.length === 1) {
-    return getImageDimensions(attachments[0]);
+    return getImageDimensionsForTimeline(attachments[0]);
   }
 
   if (attachments.length === 2) {