Code blocks: unexplained content movement over hover

[damithc]

Windows, Chrome:
Steps: Go to https://nus-cs2113-ay1920s2.github.io/website/admin/tp-deliverables.html#deliverable-demo and hover over the fenced code block shown below.

There is some movement of content although there should not be any.

[openorclose]

If we unset the width style of icon-wrapper, the issue goes away.

Changing width to min-width fixes it too.

[openorclose]

Oh, seems to be fixed by MarkBind/vue-strap#142

[openorclose]

This looks fixed, @damithc can confirm?

[damithc]

This looks fixed, @damithc can confirm?

I still see the content moving about. See the same link (it's using the latest MarkBind)

[openorclose]

Previously there was a left-right movement and wrapping of the code block on hover.

Now it's only due to the wrapping of the code block on hover.

[damithc]

Previously there was a left-right movement and wrapping of the code block on hover.

Now it's only due to the wrapping of the code block on hover.

Still though, there should not be any movement as there is no need for wrapping, right?

[damithc]

Still though, there should not be any movement as there is no need for wrapping, right?

While on the topic, after seeing it for a while, seems 'wrap on hover' is not a nice UX. Perhaps we should perform wrapping if the user clicks an icon? This kind of slight movements is not going to be a problem if it happens only on command.

[openorclose]

Ah yes, the text should not wrap. I noticed the left right movement and thought that was what you were referring to. At least that part's fixed.

[openorclose]

Still though, there should not be any movement as there is no need for wrapping, right?

While on the topic, after seeing it for a while, seems 'wrap on hover' is not a nice UX. Perhaps we should perform wrapping if the user clicks an icon? This kind of slight movements is not going to be a problem if it happens only on command.

Should we revert the hover wrap functionality first then?

[damithc]

Should we revert the hover wrap functionality first then?

I don't mind, but if there is code to be salvaged, do document that somewhere (may be in a new issue) so that the replacement feature can reuse that code if possible. The ability to wrap is a useful feature, just that it's better to do it on demand than on hover.