Skip to content

Commit

Permalink
fix: chat "scrolling up" because of imgs loading
Browse files Browse the repository at this point in the history
This, together with #4407,
should close #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.
  • Loading branch information
WofWca committed Dec 22, 2024
1 parent a858eeb commit ada6bf5
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 1 deletion.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 2 additions & 0 deletions packages/frontend/scss/message/_message-attachment.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 14 additions & 1 deletion packages/frontend/scss/message/_message.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down

0 comments on commit ada6bf5

Please sign in to comment.