Fix overflow issue on login/register page

This commit is contained in:
Antoine Bartuccio 2025-04-17 13:02:40 +02:00
parent 2a381101ac
commit 0654dfb05d
3 changed files with 25 additions and 18 deletions

View File

@ -24,13 +24,21 @@ body {
background-color: white; background-color: white;
margin: 0; margin: 0;
> .title { .alert {
word-wrap: break-word;
white-space: normal;
text-align: center;
display: block;
width: fit-content;
}
>.title {
text-align: center; text-align: center;
margin: 0; margin: 0;
} }
> div, >div,
> form { >form {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -41,8 +49,8 @@ body {
max-width: 500px; max-width: 500px;
margin-top: 20px; margin-top: 20px;
> p, >p,
> div { >div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -50,7 +58,7 @@ body {
width: 100%; width: 100%;
margin: 0; margin: 0;
> label { >label {
width: 100%; width: 100%;
@media (min-width: 500px) { @media (min-width: 500px) {
@ -59,9 +67,9 @@ body {
} }
} }
> input, >input,
> p > input, >p>input,
> div > input { >div>input {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 500px; max-width: 500px;
@ -71,35 +79,35 @@ body {
} }
} }
> .errorlist { >.errorlist {
color: red; color: red;
text-align: center; text-align: center;
margin: 10px 0 0 0; margin: 10px 0 0 0;
list-style-type: none; list-style-type: none;
} }
> .required > .helptext { >.required>.helptext {
text-align: center; text-align: center;
font-style: italic; font-style: italic;
} }
> .required:last-of-type { >.required:last-of-type {
box-sizing: border-box; box-sizing: border-box;
max-width: 300px; max-width: 300px;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
> label { >label {
width: 100%; width: 100%;
} }
> img { >img {
width: 70px; width: 70px;
object-fit: contain; object-fit: contain;
} }
> input { >input {
width: 200px; width: 200px;
} }
} }

View File

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

View File

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