fix space between button rows of the same option

src/gui/css/options.css

@@ -16,6 +16,10 @@ div.options-group div.description {
 }
 
 /* right side */
+div.options-group div.button-group {
+    margin: 6px 0;
+}
+
 div.options-group span.comment {
     color: gray;
     font-style: italic;
@@ -26,9 +30,9 @@ div.options-group button {
     color: var(--link-color);
     background-color: var(--button-color);
     border: none; /* outline instead of border */
-    /* left & right outline overlap each other so we don't have  a double border */
+    /* left & right outline overlap each other so we don't have a double border */
     outline: solid 2px var(--button-border-color);
-    margin: 6px 0 6px 2px;
+    margin-left: 2px;
 }
 
 div.options-group button:hover {
@@ -74,7 +78,6 @@ div.options-group input {
     border: 2px solid var(--button-border-color);
     min-width: unset; /* remove SC styling */
     width: 140px;
-    margin: 4px 0;
 }
 
 div.options-group input.number {

src/gui/options.js

@@ -197,6 +197,7 @@ App.UI.OptionsGroup = (function() {
 					let anySelected = false;
 
 					const buttonGroup = document.createElement("div");
+					buttonGroup.classList.add("button-group");
 					for (const value of option.valuePairs) {
 						if (value.mode === "plain") {
 							/* insert custom SC markup and go to next element */