Reorder login form to match expected tab order. Fix #5274 (#5775)

Addresses the issue of incorrect tab-order when logging on using keyboard. This change moves the password reset link to the very end of the form code, while maintaining the same visual location.

* Fix lint issues
* Refactor login position to remove unused media query

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -118,9 +118,13 @@ input[type=checkbox]:before {
     opacity: 1;
     position: absolute;
     font-size: 1.3em;
-    top: 50%;
     margin-top: -0.5em;
     right: 5%;
+    top: 213px;
+
+    @include media-breakpoint-up(sm) {
+        top: 65%;
+    }
 }
 
 .messages {

wagtail/admin/templates/wagtailadmin/login.html

@@ -52,9 +52,6 @@
                             {{ form.password }}
                         </div>
                     </div>
-                    {% if show_password_reset %}
-                        <p class="help"><a href="{% url 'wagtailadmin_password_reset' %}">{% trans "Forgotten it?" %}</a></p>
-                    {% endif %}
                 </li>
 
                 {% block extra_fields %}
@@ -83,6 +80,10 @@
                     {% endblock %}
                 </li>
             </ul>
+
+            {% if show_password_reset %}
+                <p class="help"><a href="{% url 'wagtailadmin_password_reset' %}">{% trans "Forgotten it?" %}</a></p>
+            {% endif %}
         {% endblock %}
         </form>