fix: chat "scrolling up" because of imgs loading

This is a follow-up to #4407.
This partially addresses #4404.

The bug was introduced in #3999.
Pior to that we used to have fixed width on quoted images as well.
This commmit practically reverts that MR, but also adds
`object-fit` and `object-position`, and is now in line with
message attachment images.

CHANGELOG.md

@@ -8,6 +8,7 @@
 - dev: upgrade react to v18 and react pinch pan zoom to v3
 
 ## Fixed
+- fix chat "scrolls up" right after switching (rev 2) #4431
 
 ## [1.50.1] - 2024-12-18
 

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

@@ -23,6 +23,8 @@
    *
    * for higher values (than 200px) we have to add media queries otherwise
    * messages with images get strange paddings on small windows
+   *
+   * The same goes for `.quoted-image`.
    */
   & > .attachment-content {
     object-fit: scale-down;

packages/frontend/scss/message/_message.scss

@@ -470,8 +470,21 @@
   }
 
   img.quoted-image {
+    // Remember that width and height need to be set prior to the image
+    // getting actually loaded by the browser, to avoid content shifts.
+    // Same goes for messages' `.attachment-content`.
+    // See https://github.com/deltachat/deltachat-desktop/issues/4404.
+    //
+    // Setting just the height is not enough, because there might be text
+    // displayed beside the image, which might wrap and thus change height.
+    //
+    // In addition, really short and wide images could make the message
+    // overflow the chat container, for non-self-sent messages at least.
     height: var(--quote-img-size);
-    // do not set width, to keep the aspect ratio (see https://github.com/deltachat/deltachat-desktop/issues/3931)
+    width: var(--quote-img-size);
+    object-fit: scale-down;
+    object-position: center;
+
     margin-left: 6px;
   }