From 47979718ebf7ba2605ea6d67ea3bc7ff8a741dd9 Mon Sep 17 00:00:00 2001
From: litruv <litruv@gmail.com>
Date: Tue, 25 Aug 2026 00:02:45 +1000
Subject: [PATCH] Fix responsive message images

Constrain image attachments to their parent while preserving their aspect ratio.
---
 src/app/components/message/MsgTypeRenderers.tsx         | 2 +-
 src/app/components/message/attachment/Attachment.css.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 6aee412..a88b141 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -262,7 +262,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
       <AttachmentBox
         style={{
           width: toRem(width),
-          height: toRem(height),
+          aspectRatio: `${width} / ${height}`,
           ['--media-h' as string]: `${height}px`,
         }}
         data-paarrot-media-height={height}
diff --git a/src/app/components/message/attachment/Attachment.css.ts b/src/app/components/message/attachment/Attachment.css.ts
index 6aa114c..01f23ad 100644
--- a/src/app/components/message/attachment/Attachment.css.ts
+++ b/src/app/components/message/attachment/Attachment.css.ts
@@ -8,7 +8,7 @@ export const Attachment = recipe({
     color: color.SurfaceVariant.OnContainer,
     borderRadius: config.radii.R400,
     overflow: 'hidden',
-    maxWidth: toRem(400),
+    maxWidth: `min(100%, ${toRem(400)})`,
   },
   variants: {
     outlined: {
@@ -33,7 +33,7 @@ export const AttachmentHeader = style({
 export const AttachmentBox = style([
   DefaultReset,
   {
-    maxWidth: toRem(400),
+    maxWidth: `min(100%, ${toRem(400)})`,
     maxHeight: toRem(400),
     overflow: 'hidden',
   },