In post editor, "draft saved" moves the preview

[cellio]

During the editing of a post, we occasionally save the draft automatically. When this happens, a green "draft saved" message briefly appears at the bottom of the editor, alongside the character count. This is helpful, but it also causes a line wrap, which makes that second of the page taller, which pushes the preview down. Then a second or two later the green message disappears and the preview moves back up again. This can be pretty distracting, as pointed out in https://meta.codidact.com/posts/290389.

Can we prevent the re-layout below that line somehow, either by preventing the line wrap or by pre-allocating the space it's going to need so things don't visually jump around? Maybe if "draft saved" replaces something else on the line temporarily, we could avoid the wrap? Would it make sense to put the notice at the top of the editor, in the button row next to the "save" button? (I don't know if that's a good idea; the author's focus will be at the bottom where the new text goes.)

I looked for this in the view code but, alas, it's in the Javascript where I am less comfortable, so I'm filing this bug instead of just fixing it myself. The relevant code is in app/assets/javascripts/posts.js.

[Oaphi]

Claiming this one as I've worked on character counts before, and this is specifically related to the "draft saved" element positioning relative to the last element of the post body hint (which happens to be the counter). It seems to be an old issue, it's just that now it is easier to spot as the counter is always visible. The exact reason of the notification issue is that it's been appended and removed instead of always being there with only its visibility being toggled.

[cellio]

"Present but invisible" had not occurred to me. That seems elegant.