Today, in the review queue, I stumbled upon this Suggested edit, which looks like this on my browser:
Looked simple enough to me: the editor removed a duplicated "is", that's clearly an improvement, and I don't see any obvious issues with the post (well, except that the whole first sentence is useless, but that's another debate), so I approved!
I then realized (after approving) that I must have missed something, because the edit was only 3 characters (and I think that there should be a 5 or 7-characters minimum length for suggested edits). So, I went back to it, opened the "Side-by-side Markdown" view, and, sure enough, the edit also changed the code. If I had seen that when reviewing, I would not have approved.
I realize that an answer could be "you should always check side-by-side markdown view", but the "side-by-side" view is in my opinion often more pleasant to view, and checking all views for every review just in case is not the most pleasant workflow either. And of course, reading the edit message would have alerted me that I was missing something, but for such a small edit, it's usually not necessary to check the edit message (and, in general, edit message are useless 95% of the time).
I'm not sure what would be the best way to represent this kind of changes, but something like a green/red mark on the side of the code block (or even before or after) would be useful in my opinion. Maybe like this:
Or at least some indication that part of the edit is hidden. Or it could be a warning saying "part of this edit modified code, which may not be visible without scrolling or using the side-by-side markdown view".
currentTarget.textContent
" was changed to "target.innerText
"