From bb301a1d5e60857a7d80244c8ea0fb232802a1ea Mon Sep 17 00:00:00 2001
From: Marcin Kralka <marcink96@gmail.com>
Date: Thu, 11 Jan 2024 16:02:38 +0100
Subject: [PATCH] Fix general margin issues for IE10/IE11. Instead of using gap
 property we use generic margins which may potentially mean that use of
 flexboxes is useless anyway (at least on the current and only (for now)
 theme)."

---
 dist/index.html |  8 ++++----
 scss/main.scss  | 51 ++++++++++++++++++++++++++++---------------------
 2 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index a1756fa..51e4c26 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -22,9 +22,9 @@
 		<div id="container">
 			<fieldset id="settings" role="form">
 				<legend>Settings</legend>
-				<div id="inner-fieldset">
-					<div id="version-stuff">
-						<div id="version-stuff-title">
+				<div id="settings-inner">
+					<div id="version-input">
+						<div id="version-input-title">
 							Game version:
 						</div>
 
@@ -34,7 +34,7 @@
 						</div>
 					</div>
 
-					<div>
+					<div id="parameters-input">
 						<div id="exclude-unobtainable-setting">
 							<input type="checkbox" id="exclude-unobtainable" name="exclude-unobtainable" />
 							<label for="exclude-unobtainable">Exclude unobtainable blocks/items</label>
diff --git a/scss/main.scss b/scss/main.scss
index c12dec5..b579fc0 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -55,13 +55,15 @@ p {
 
 	flex-flow: column nowrap;
 
-	gap: 12px;
-
 	text-align: center;
 	line-height: 16px;
 	font-size: 11px;
 }
 
+#info > div:not(:last-child) {
+	margin-bottom: 12px;
+}
+
 #info-early-classic {
 	display: none;
 
@@ -105,16 +107,6 @@ p {
 	color: $color-removed;
 }
 
-#inner-fieldset {
-	display: flex;
-
-	margin: 8px 16px 18px 16px;
-
-	gap: 16px;
-
-	flex-flow: column nowrap;
-}
-
 #legal-info {
 	position: fixed;
 
@@ -174,6 +166,14 @@ p {
 	padding: 3px 8px 3px 8px;
 }
 
+#settings-inner {
+	display: flex;
+
+	margin: 8px 16px 18px 16px;
+
+	flex-flow: column nowrap;
+}
+
 #version-info {
 	position: fixed;
 
@@ -189,24 +189,29 @@ p {
 	padding: 2px 3px 2px 7px;
 }
 
+#version-input {
+	display: flex;
+
+	margin-bottom: 16px;
+
+	flex-flow: row nowrap;
+	align-items: center;
+}
+
 #version-selection {
 	display: flex;
-	flex-flow: column nowrap;
 
-	gap: 2px;
+	margin-left: 16px;
+
+	flex-flow: column nowrap;
 }
 
 #version-selection select {
 	width: 160px;
 }
 
-#version-stuff {
-	display: flex;
-
-	flex-flow: row nowrap;
-	align-items: center;
-
-	gap: 16px;
+#version-selection select:not(:last-child) {
+	margin-bottom: 2px;
 }
 
 .fieldset-content {
@@ -273,8 +278,10 @@ p {
 		margin-bottom: 18px;
 
 		flex-flow: row wrap;
+	}
 
-		row-gap: 16px;
+	main > fieldset:not(:last-child) {
+		margin-bottom: 16px;
 	}
 
 	p {