Merge branch 'main' into simon/make-area-under-traffic-lights-dragabl…

…e-and-slightly-larger

CHANGELOG.md

@@ -14,6 +14,7 @@
 - avoid drafts in readonly chats #4349
 - fullscreen images getting cropped a little #4402, #4385
 - macOS: make area under traffic lights dragable and fix the bug that its size changed based on profile acount and window height #4408
+- fix chat "scrolls up" right after switching #4404
 
 <a id="1_49_0"></a>
 

packages/frontend/scss/message/_message-attachment.scss

@@ -16,13 +16,23 @@
   overflow: hidden;
 
   background-color: var(--messageAttachmentIconBg);
-
+  /**
+   * we need a fix height for images to prevent reflow when the image loads
+   * till we have a better solution (more flexible) we allow a maximum height
+   * of 200px for all images in landscape mode and 300px for portrait mode
+   *
+   * for higher values (than 200px) we have to add media queries otherwise
+   * messages with images get strange paddings on small windows
+   */
   & > .attachment-content {
     object-fit: scale-down;
     object-position: center;
-    max-height: 600px;
+    height: 200px;
     max-width: 100%;
     min-width: 80px;
+    &.portrait {
+      height: 300px;
+    }
 
     // The padding on the bottom of the bubble produces 4 extra pixels of space at the
     //   bottom, so this doesn't match up with the padding numbers above.
@@ -76,7 +86,7 @@
 .message.type-sticker {
   .message-attachment-media {
     & > .attachment-content {
-      max-height: 300px;
+      max-height: 200px;
       max-width: 80%;
     }
   }

packages/frontend/src/components/attachment/messageAttachment.tsx

@@ -22,6 +22,7 @@ import FullscreenMedia, {
 import useTranslationFunction from '../../hooks/useTranslationFunction'
 import useDialog from '../../hooks/dialog/useDialog'
 import AudioPlayer from '../AudioPlayer'
+import { T } from '@deltachat/jsonrpc-client'
 
 type AttachmentProps = {
   text?: string
@@ -54,6 +55,15 @@ export default function Attachment({
       openAttachmentInShell(message)
     }
   }
+
+  const isPortrait = (
+    message: Pick<T.Message, 'dimensionsHeight' | 'dimensionsWidth'>
+  ) => {
+    if (message.dimensionsHeight === 0 || message.dimensionsWidth === 0) {
+      return false
+    }
+    return message.dimensionsWidth / message.dimensionsHeight <= 3 / 4
+  }
   const withCaption = Boolean(text)
   // For attachments which aren't full-frame
   const withContentBelow = withCaption
@@ -84,7 +94,10 @@ export default function Attachment({
         )}
       >
         <img
-          className='attachment-content'
+          className={classNames(
+            'attachment-content',
+            isPortrait(message) ? 'portrait' : null
+          )}
           src={runtime.transformBlobURL(message.file)}
         />
       </button>