Adding image to ckeditor causes entire layout to shift

I can confirm this is an issue.
https://ddev.readthedocs.io/en/latest/users/quickstart/#__tabbed_4_2
I used the ddev quick start and then created a new basic page on Olivero's standard profile.

Seems like the issue comes from

without the issue

<figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"

removing style="height:1512px;width:2824px;" fixes the issue.

Same page without the issue.

removing style="height:1512px;width:2824px;" from <figure class="image ck-widget image_resized ck-widget_with-resizer ck-widget_selected" style="height:1512px;width:2824px;" contenteditable="false"

Also, I just noticed that clicking the original format as seen in the image below fixes it.

However, that setting does not get saved so upon opening the node the layout changes and it pics a different resolution.
So the image ckeditor plugin might be the buggy party here.

I think I have found something.

https://git.drupalcode.org/project/drupal/-/blob/4692fca5bcd33728bff24a5...

⚠️ Everything below this point is copy/pasted directly from https://github.com/ckeditor/ckeditor5/pull/15222, to continue to use the `width` and `height` attributes to indicate resized width and height. This is necessary since CKEditor 5 v40.0.0.

CKEditor5 uses image_resized attribute to track whether the image was resized or not. Drupal does it differently - it uses only width and height attributes of the img tag.

The problem here is that both width and height attributes are set immediately after an image is uploaded. Once the editor is reloaded, Drupal makes CKEditor think that the image was manually resized.

Looks like a bug in drupalimageediting.js

That issue is not only happening with images while adding via editor.
We found the same issue if you add a very long URL and click to see the Source Code.
I uploaded a video with the issue.
My quick fix for it was to add a custom css for the .ck.ck-editor via theme:

theme.info.yml
ckeditor5-stylesheets:
    - css/admin/ckeditor-fixes.css

.ck.ck-editor {
  max-width: 960px;
}

It's not the best I belive but should help others for now.

The issue is occurring for me as well.

@aluzzardi's workaround works for me. Thank you @aluzzardi!

Changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to our policies.

Cannot reproduce in the latest version of Drupal core 11.x-dev.

@kpap "An easy way to test this is to input a long string into the CKEditor5 interface, e.g. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiioooooooooooAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAiioooooooooooA - Observe the undesirable effects." - @klidifia #37 in issue 3381219.

On https://www.drupal.org/project/drupal/issues/3381219 🐛 Layout Issues with Claro theme Needs work was fixed for Node form, now we need to work on this for others forms with CKEditor.

I did manage to reproduce this problem in an older version of Drupal (10.3.6), but in current versions (10.5-dev and 11.2-dev) this issue no longer seems to occur. Therefore I am marking this issue as Closed (outdated).

If anyone is able to reproduce this issue in a current version of Drupal, please provide (additional) steps to reproduce and mark this issue as Active.

Thanks everyone for your time and effort!