1 files changed, 43 insertions, 22 deletions

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index b73978e33..b63c47701 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -257,31 +257,35 @@ input, select, textarea {
 		overflow: auto;
 		margin: 0;
 	}
-}
-
-.hidden {
-	display: none;
-}
 
-.messagebutton, .messagebutton > div {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
+	&.with-dismiss {
+		display: flex;
+		gap: 1rem;
+		justify-content: space-between;
+		align-items: center;
+		align-items: center;
+		flex-wrap: wrap;
+		align-items: center;
+		flex-wrap: wrap;
 
-	div.padded {
-		margin-left: 1rem;
+		.dismiss {
+			display: flex;
+			flex-shrink: 0;
+			align-items: center;
+			align-self: stretch;
+			gap: 0.25rem;
+		}
 	}
+}
 
-	button, .button {
-		white-space: nowrap;
-		margin-right: 1rem;
-	}
+.mutation-button {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
 }
 
-.messagebutton > div {
-	button, .button {
-		margin-top: 1rem;
-	}
+.hidden {
+	display: none;
 }
 
 .notImplemented {
@@ -500,12 +504,29 @@ form {
 	font-weight: bold;
 }
 
-.form-field.file label {
+.form-field.file {
 	display: grid;
 	grid-template-columns: auto 1fr;
+	grid-template-rows: auto auto;
+	grid-template-areas:
+		"label-label  label-label"
+		"label-button file-info"
+	;
+	
+	.label-label {
+		grid-area: label-label;
+	}
+
+	.label-button {
+		grid-area: label-button;
+	}
 
-	.label {
-		grid-column: 1 / span 2;
+	.form-info {
+		grid-area: file-info;
+		.error {
+			padding: 0.1rem;
+  			line-height: 1.4rem;
+		}
 	}
 }