fix: enhance layout consistency in Docker settings

- Introduced a new flex utility class `.buttons-no-margin` in default-base.css to manage button spacing effectively.
- Updated CreateDocker.php to wrap checkbox inputs in flex containers for improved alignment and spacing.
- Adjusted AddContainer.css to refine the max-width of span elements and commented out unused styles for better maintainability.
- This change continues the effort to enhance visual consistency across the plugin.

emhttp/plugins/dynamix.docker.manager/include/CreateDocker.php

@@ -1154,7 +1154,9 @@ _(Container Network)_:
 
 <div markdown="1" class='TSNetworkAllowed'>
 _(Use Tailscale)_:
-: <input type="checkbox" class="switch-on-off" name="contTailscale" id="contTailscale" <?php if (!empty($xml['TailscaleEnabled']) && $xml['TailscaleEnabled'] == 'true') echo 'checked'; ?> onchange="showTailscale(this)">
+: <span class="flex flex-row items-center">
+    <input type="checkbox" class="switch-on-off" name="contTailscale" id="contTailscale" <?php if (!empty($xml['TailscaleEnabled']) && $xml['TailscaleEnabled'] == 'true') echo 'checked'; ?> onchange="showTailscale(this)">
+  </span>
 
 :docker_tailscale_help:
 
@@ -1411,7 +1413,9 @@ _(Console shell command)_:
   </select>
 
 _(Privileged)_:
-: <input type="checkbox" class="switch-on-off" name="contPrivileged">
+: <span class="flex flex-row items-center">
+    <input type="checkbox" class="switch-on-off" name="contPrivileged">
+  </span>
 
 :docker_privileged_help:
 
@@ -1485,7 +1489,7 @@ _(Default Value)_:
 <div id="Mode"></div>
 
 _(Description)_:
-: <textarea name="Description" spellcheck="false" cols="80" rows="3" style="width:304px;"></textarea>
+: <textarea name="Description" spellcheck="false" cols="80" rows="3"></textarea>
 
 <div markdown="1" class="advanced">
 _(Display)_:
@@ -1520,8 +1524,20 @@ _(Password Mask)_:
 <input type="hidden" name="confDisplay[]" value="{6}">
 <input type="hidden" name="confRequired[]" value="{7}">
 <input type="hidden" name="confMask[]" value="{8}">
+
 <span class="{11}"><i class="fa fa-fw fa-{13}"></i>&nbsp;&nbsp;{0}:</span>
-: <span class="boxed"><input type="text" class="setting_input" name="confValue[]" default="{2}" value="{9}" autocomplete="off" spellcheck="false" {11}>{10}<br><span class='orange-text'>{12}: {1}</span><br><span class="orange-text">{4}</span><br></span>
+: <span class="flex flex-col gap-4">
+    <span class="flex flex-row flex-wrap items-center gap-4 buttons-no-margin">
+      <input type="text" class="setting_input" name="confValue[]" default="{2}" value="{9}" autocomplete="off" spellcheck="false" {11}>
+      {10}
+    </span>
+    <span class="boxed">
+      <span class='orange-text'>{12}: {1}</span>
+      <br>
+      <span class="orange-text">{4}</span>
+      <br>
+    </span>
+  </span>
 </div>
 
 <div markdown="1" id="templateAllocations" style="display:none">
@@ -1865,11 +1881,15 @@ $(function() {
       confNum += 1;
       Opts = Settings.Config[i];
       if (Opts.Display == "always-hide" || Opts.Display == "advanced-hide") {
-        Opts.Buttons  = "<span class='advanced'><button type='button' onclick='editConfigPopup("+confNum+",<?=$disableEdit?>)'>_(Edit)_</button>";
+        Opts.Buttons = "<span class='flex flex-row items-center gap-4'>";
+        Opts.Buttons += "<span class='advanced'><button type='button' onclick='editConfigPopup("+confNum+",<?=$disableEdit?>)'>_(Edit)_</button>";
         Opts.Buttons += "<button type='button' onclick='removeConfig("+confNum+")'>_(Remove)_</button></span>";
+        Opts.Buttons += "</span>";
       } else {
-        Opts.Buttons  = "<button type='button' onclick='editConfigPopup("+confNum+",<?=$disableEdit?>)'>_(Edit)_</button>";
+        Opts.Buttons = "<span class='flex flex-row items-center gap-4'>"; 
+        Opts.Buttons += "<button type='button' onclick='editConfigPopup("+confNum+",<?=$disableEdit?>)'>_(Edit)_</button>";
         Opts.Buttons += "<button type='button' onclick='removeConfig("+confNum+")'>_(Remove)_</button>";
+        Opts.Buttons += "</span>";
       }
       Opts.Number = confNum;
       if (Opts.Type == "Device") {

emhttp/plugins/dynamix.docker.manager/sheets/AddContainer.css

@@ -8,9 +8,7 @@
 }
 span.boxed {
     display: inline-block;
-    line-height: normal;
-    white-space: normal;
-    width: 60%;
+    max-width: 100ch;
 }
 span.cpu,
 label.checkbox {
@@ -29,7 +27,7 @@ span.ip {
     display: inline-block;
     width: 160px;
 }
-dl,
+/* dl,
 dt,
 dd {
     line-height: normal !important;
@@ -41,21 +39,21 @@ dl {
 dl > dt:nth-of-type(2),
 dl > dd:nth-of-type(2) {
     padding: 20px 0 0 0 !important;
-}
-input.setting_input {
+} */
+/* input.setting_input {
     margin-right: 4rem;
-}
-input,
+} */
+/* input,
 select {
     margin-top: -0.8rem !important;
-}
-div#configLocation,
+} */
+/* div#configLocation,
 div#configLocation dl {
     padding: 0 !important;
 }
 div#configLocation dt {
     margin-top: -0.18rem !important;
-}
+} */
 
 :root {
     --add-container-file-tree-background: var(--black);

emhttp/plugins/dynamix/styles/default-base.css

@@ -195,6 +195,24 @@ a.button,
     background: var(--button-background);
     background-size: var(--button-background-size);
 }
+
+/* necessary evil until we re-write button styles */
+.buttons-no-margin {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+
+    input[type="button"],
+    input[type="reset"],
+    input[type="submit"],
+    button,
+    button[type="button"],
+    a.button,
+    .sweet-alert button {
+        margin: 0;
+    }
+}
+
 input[type="checkbox"] {
     vertical-align: middle;
     margin-right: 6px;