Fix overflow issue on login/register page

core/static/user/login.scss

@@ -24,6 +24,14 @@ body {
     background-color: white;
     margin: 0;
 
+    .alert {
+      word-wrap: break-word;
+      white-space: normal;
+      text-align: center;
+      display: block;
+      width: fit-content;
+    }
+
     >.title {
       text-align: center;
       margin: 0;

core/templates/core/login.jinja

@@ -29,14 +29,13 @@
   <form method="post" action="{{ url('core:login') }}">
     {% if form.errors %}
       <p class="alert alert-red">{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
-      <br>
     {% endif %}
 
     {% csrf_token %}
 
     <div>
       <label for="{{ form.username.name }}">{{ form.username.label }}</label>
-      <input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" />
+      {{ form.username }}
       {{ form.username.errors }}
     </div>
 

core/templates/core/register.jinja

@@ -18,7 +18,7 @@
   <form action="{{ url('core:register') }}" method="post">
     {% csrf_token %}
     {% render_honeypot_field %}
-    {{ form }}
+    {{ form.as_p() }}
     <input type="submit" value="{% trans %}Register{% endtrans %}" />
   </form>
 {% endblock %}