improve new member form style

club/static/club/members.scss

@@ -0,0 +1,24 @@
+#club_members_table {
+  tbody label {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+#add_club_members_form {
+  fieldset {
+    display: flex;
+    flex-direction: row;
+    column-gap: 2em;
+    row-gap: 1em;
+    flex-wrap: wrap;
+
+    @media (max-width: 1100px) {
+      justify-content: space-evenly;
+    }
+
+    .errorlist {
+      max-width: 300px;
+    }
+  }
+}

club/templates/club/club_members.jinja

@@ -7,11 +7,14 @@
 {% block additional_css %}
   <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
+  <link rel="stylesheet" href="{{ static("club/members.scss") }}">
 {% endblock %}
 
 {% block content %}
   <h2>{% trans %}Club members{% endtrans %}</h2>
   <br />
+  <h4>{% trans %}Add a new member{% endtrans %}</h4>
+
   {{ add_member_fragment }}
   <br />
   {% if members %}

club/templates/club/fragments/add_member.jinja

@@ -1,27 +1,30 @@
-<h4>{% trans %}Add a new member{% endtrans %}</h4>
 <form
   hx-post="{{ url('club:club_new_members', club_id=club.id) }}"
   hx-disabled-elt="find input[type='submit']"
   hx-swap="outerHTML"
-  id="add_users"
+  id="add_club_members_form"
 >
   {% csrf_token %}
   {{ form.non_field_errors() }}
-  <p>
-    {{ form.user.errors }}
-    {{ form.user.label_tag()}}
-    <span class="helptext">{{ form.user.help_text }}</span>
-    {{ form.user }}
-  </p>
-  <p>
-    {{ form.role.errors }}
-    {{ form.role.label_tag()}}
-    {{ form.role }}
-  </p>
-  <p>
-    {{ form.description.errors }}
-    {{ form.description.label_tag()}}
-    {{ form.description }}
-  </p>
-  <p><input type="submit" /></p>
+  <fieldset>
+
+    <div>
+      {{ form.user.label_tag()}}
+      <span class="helptext">{{ form.user.help_text }}</span>
+      {{ form.user }}
+      {{ form.user.errors }}
+    </div>
+    <div>
+      {{ form.role.label_tag()}}
+      {{ form.role }}
+      {{ form.role.errors }}
+    </div>
+    <div>
+      {{ form.description.label_tag()}}
+      {{ form.description }}
+      {{ form.description.errors }}
+    </div>
+  </fieldset>
+  <button type="submit" class="btn btn-blue">
+    <i class="fa fa-user-plus"></i> {% trans %}Add{% endtrans %}</button>
 </form>