Issue in image/text preview when writing a message

Contribute UX

AI-generated summary

Issue in image/text preview: Canapin reports a layout issue in the preview panel when text is placed between two images. The issue only occurs when there is a blank line before or after the text and the images are not wide enough to take up the entire preview panel width. The problem disappears when the final post is made. Canapin has confirmed the issue on meta.Discourse and their own Discourse using both Chrome and Edge. They have provided screenshots and a GIF to illustrate the problem. sam is unable to reproduce the issue.

1

There is a weird behavior in the preview when having a blank line before or after a text around pictures.
Examples:

No issue here:

image
image1253×972 243 KB

If I add a blank line before the text, the text begins on the right side of the first picture.

image
image1400×975 249 KB

If I add a blank line after the text and if the text is short, the text is displayed on the left side of the second picture:

image
image1430×980 252 KB

If the text is longer, the issue will disappear.

This is only in the preview panel, in all of these cases the final post will have no layout issue.

The issue also won’t appear if the text is not between two images, or if the image in the preview is wide enough to take all the preview panel width.

I use Chrome on Windows 10.

1 Like
2

I am unable to reproduce this on meta. Can you create the problem here on a reply to this topic?

3

Yes, I did the screenshots here on meta.discourse and it happens also on my own Discourse.

I also tried again while using Edge and the problem happened too.:

image
image1858×1080 258 KB

Also, the issue seems only to happen when you upload an image (I pasted the cats directly in the text area), not when you paste an image link to show the picture.

Here’s a gif:

ej33XBf2x0
ej33XBf2x01476×727 403 KB

2 Likes