At narrow screen-sizes, a password-unmask field looks like this:

I think this is happening because of the following combination of things:

1. Bootstrap styles say:

.form-control {

    display: block;

}

@media (min-width: 576px)

.form-inline .form-control {

	display: inline-block;

}

2. In the middle of lib/form/templates/element-passwordunmask.mustache, it applies class="form-control class" to one of the <a> tags which makes up the UI.

Therefore, on narrow screens, the show/hide icon gets forced onto a new line, which is ugly.

This is particuarly bad in the quiz, after (if) MDL-69551 is integrated, since there, the form is in a modal, so it is always narrow, so the layout is always bad.

I thought about trying to fix this in MDL-69551, but then I thought that there is huge potential for any change to have unintended consequences, so I decided to make a separate issue.