Skip to content

In post editor, "draft saved" moves the preview #1272

@cellio

Description

@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.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions