Use a single flex container instead of 2 fixed columns

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

scripts/pi-hole/js/settings-advanced.js

@@ -214,13 +214,7 @@ function generateRow(topic, key, value) {
 
   box += "</div></div> ";
   var topKey = key.split(".")[0];
-  // Add the box to the left or right column depending on which is shorter
-  // This is done to reduce gaps between boxes
-  var elem =
-    $("#advanced-content-" + topKey + "-left").height() <=
-    $("#advanced-content-" + topKey + "-right").height() + 10
-      ? $("#advanced-content-" + topKey + "-left")
-      : $("#advanced-content-" + topKey + "-right");
+  var elem = $("#advanced-content-" + topKey + "-flex");
   elem.append(box);
 }
 
@@ -249,12 +243,9 @@ function createDynamicConfigTabs() {
             '<div class="row" id="advanced-content-' +
             topic.name +
             '-body">' +
-            '<div class="col-md-6" id="advanced-content-' +
+            '<div class="col-xs-12 settings-container" id="advanced-content-' +
             topic.name +
-            '-left"></div>' +
-            '<div class="col-md-6" id="advanced-content-' +
-            topic.name +
-            '-right"></div>' +
+            '-flex"></div>' +
             "</div>" +
             "</div>" +
             "</div>" +

style/pi-hole.css

@@ -525,6 +525,16 @@ td.details-control {
   padding-right: 20px;
 }
 
+.settings-container {
+  --number-of-columns: 2;
+  display: flex;
+  flex-wrap: wrap;
+}
+.settings-container > .box {
+  margin: 10px;
+  width: calc((100% / var(--number-of-columns)) - 20px);
+}
+
 @media screen and (max-width: 991px) {
   #domain-search-block {
     display: block;
@@ -539,6 +549,9 @@ td.details-control {
     margin: 0 5px 0 0;
     border-radius: 3px;
   }
+  .settings-container {
+    --number-of-columns: 1;
+  }
 }
 
 /*** Login page ***/