Nicer display for input validation errors

frontend/src/main.less

@@ -51,6 +51,16 @@ body, @{inputs}, @{buttons} {
 
 @{inputs} {
 	padding: .2rem .3rem;
+	&.error {
+		border-color: red;
+	}
+}
+
+.input-error {
+	width: 100%;
+	font-size: .875em;
+	color: red;
+	grid-column-start: 2;
 }
 
 @{buttons} {

schilder2000/templates/_base.html.j2

@@ -13,13 +13,9 @@
 			{%- set error = ' error' if field.errors else '' -%}
 			{{ field.label(class="for-text"+error) }}
 			{{ field(class=class+error) }}
-			{%- if field.errors -%}
-				<ul class="errors">
 			{%- for err in field.errors -%}
-						<li>{{ err|e }}</li>
+				<div class="input-error">{{ err|e }}</div>
 			{%- endfor -%}
-				</ul>
-			{%- endif -%}
 		</div>
 	{%- endif -%}
 {%- endmacro -%}