Stop using tables for forms

res/static/style/layout.css

@@ -320,14 +320,36 @@ p {
 	margin: 1em 0;
 }
 
+/* Forms*/
+
 .form {
+	display: flex;
+	flex-direction: column;
 	margin-left: auto;
 	margin-right: auto;
-	text-align: left;
-	max-width: 30em;
+	text-align: initial;
+	max-width: 500px;
 	width: 100%;
 }
 
+.form>* {
+	display: block;
+	margin-left: 3px;
+	margin-right: 3px;
+}
+
+.form>label {
+	margin-top: 1em;
+}
+
+.form>input[type="submit"],
+.form>button[type="submit"] {
+	align-self: end;
+	margin-top: 1em;
+}
+
+/* Tables */
+
 table:not(.form) {
 	border-collapse: collapse;
 	width: 100%;
@@ -344,7 +366,7 @@ table:not(.form) {
 	min-width: 100%;
 }
 
-tr:not(.form) {
+tr {
 	border-bottom: 1px var(--separator) solid;
 }
 
@@ -353,16 +375,6 @@ tr>th {
 	padding: 0.2em 0.5em;
 }
 
-@media(max-width: 30em) {
-
-	/* Forms will be stacked on small screens */
-	tr.form>td {
-		float: left;
-		width: 100%;
-		padding: 0.5em;
-	}
-}
-
 pre {
 	padding: 10px;
 	border-bottom: 1px var(--separator) solid;
@@ -416,12 +428,6 @@ details.request_patch {
 	background-color: rgba(128, 0, 255, 0.1);
 }
 
-/* Form fields */
-
-.form_input {
-	width: 100%;
-}
-
 /* BUTTONS */
 button,
 .button,
@@ -583,7 +589,7 @@ input[type="date"] {
 	border: none;
 	border-radius: 6px;
 	background: var(--input_background);
-	box-shadow: inset 1px 1px 2px -1px var(--shadow_color);
+	/* box-shadow: inset 1px 1px 2px -1px var(--shadow_color); */
 	padding: 3px 5px;
 	color: var(--input_text);
 	font-size: 1em;