As nobody could answer this I did some more digging this morning and found the culprit. The image-sizing-hack as it is so called inside the code of a particular JS file makes overriding this with CSS rather tricky. Here is an explanation of the problem and currently partial solution.
The image-sizing-hack as it is called is inherited from a file called “html.desktop-view.not-mobile-device.js.no-touch.discourse-no-touch”
It gets placed into the site code like this
To override it now so that large images do not get cut off I found the following CSS to successfully override the image-sizing-hack but it once again leaves me with oversized emoji’s. Adding .emoji into the img:not clause once again breaks the whole thing.
So here’s my CSS for correct image sizing (but rather large emoji’s)
body #image-sizing-hack #reply-control .d-editor-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
width: auto;
height: auto;
display: block !important;
max-width: 800px !important;
max-height: auto !important;
}
and how the emoji’s look
