Improve styles

common/input.css

@@ -179,6 +179,13 @@ textarea:disabled {
 }
 
 #add-form {
+  label + select, input, textarea {
+    @apply mt-1;
+  }
+  form {
+    @apply flex flex-col gap-3;
+  }
+
   .form-row-button-group {
     display: flex;
     flex-direction: row;
@@ -212,7 +219,7 @@ textarea:disabled {
     @apply bg-neutral-secondary-medium border border-default-medium text-heading text-sm rounded-base focus:ring-brand focus:border-brand block w-full p-3.5 shadow-xs placeholder:text-body;
   }
   :has(> label + input[type="checkbox"]) {
-    @apply mb-3 mt-6;
+    @apply mt-3; /* needed because compared to all other form elements checkbox and its label are on the same row */
     display: flex;
     flex-direction: row;
     justify-content: space-between;

games/static/base.css

@@ -3893,6 +3893,14 @@ form input:disabled, select:disabled, textarea:disabled {
   padding-left: 1em;
 }
 #add-form {
+  label + select, input, textarea {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  form {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 3);
+  }
   .form-row-button-group {
     display: flex;
     flex-direction: row;
@@ -4012,8 +4020,7 @@ form input:disabled, select:disabled, textarea:disabled {
     }
   }
   :has(> label + input[type="checkbox"]) {
-    margin-top: calc(var(--spacing) * 6);
-    margin-bottom: calc(var(--spacing) * 3);
+    margin-top: calc(var(--spacing) * 3);
     display: flex;
     flex-direction: row;
     justify-content: space-between;

games/templates/cotton/layouts/add.html

@@ -3,7 +3,7 @@
 {% if form_content %}
     {{ form_content }}
 {% else %}
-<div class="max-width-container">
+<div id="add-form" class="max-width-container">
     <div id="add-form" class="form-container max-w-xl mx-auto">
         <form method="post" enctype="multipart/form-data">
             {% csrf_token %}