From 21f47ce7476392e1b5318ff70db61b861656149f Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 26 Sep 2025 14:27:26 -0400
Subject: [PATCH] Refactor: Update layout and styling for consistency across
 diagnostics, configuration, and permissions pages

---
 emhttp/plugins/dynamix/Diagnostics.page |  6 +++---
 emhttp/plugins/dynamix/NewConfig.page   | 12 ++++++------
 emhttp/plugins/dynamix/NewPerms.page    | 20 ++++++++++----------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/emhttp/plugins/dynamix/Diagnostics.page b/emhttp/plugins/dynamix/Diagnostics.page
index c4b647096..7cbba6656 100644
--- a/emhttp/plugins/dynamix/Diagnostics.page
+++ b/emhttp/plugins/dynamix/Diagnostics.page
@@ -110,15 +110,15 @@ to the system log.*
 *Use* **Anonymize diagnostics** *when publishing the diagnostics file in the public forum. In private communication with Limetech it is recommended to uncheck this setting and capture all information unaltered.*
 :end
 
-<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
+<div class="flex flex-col gap-4 items-start">
+  <div class="flex flex-wrap items-center gap-4">
     <label for="anonymize" class="inline-flex flex-row items-center gap-2">
       <input type="checkbox" id="anonymize" checked>
       <span>_(Anonymize diagnostics)_</span>
     </label>
   </div>
 
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
+  <div class="flex flex-wrap items-center gap-4">
     <input id='download' type="button" value="_(Download)_" onclick="$(this).attr('disabled',true);diagnostics(zipfile())">
     <input type="button" value="_(Done)_" onclick="done()">
   </div>
diff --git a/emhttp/plugins/dynamix/NewConfig.page b/emhttp/plugins/dynamix/NewConfig.page
index e9ec459a9..53e50942e 100644
--- a/emhttp/plugins/dynamix/NewConfig.page
+++ b/emhttp/plugins/dynamix/NewConfig.page
@@ -62,11 +62,11 @@ effect of making it ***impossible*** to rebuild an existing failed drive - you h
 <input type="hidden" name="preserveArray" value="yes" disabled>
 <input type="hidden" name="preserveCache" value="yes" disabled>
 
-<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
-    <span style="font-weight:600;">_(Preserve current assignments)_:</span>
+<div class="flex flex-col gap-4 items-start">
+  <div class="flex flex-wrap items-center gap-4">
+    <span class="strong">_(Preserve current assignments)_:</span>
     <div class="inline-block">
-      <select id="s1" name="preset" multiple="multiple" style="display:none">
+      <select id="s1" name="preset" multiple="multiple" class="hidden">
         <option value=''>_(All)_</option>
         <?=mk_option_check(0,'array',_('Array slots'))?>
         <?=mk_option_check(0,'cache',_('Pool slots'))?>
@@ -74,7 +74,7 @@ effect of making it ***impossible*** to rebuild an existing failed drive - you h
     </div>
   </div>
 
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
+  <div class="flex flex-wrap items-center gap-4">
     <?if ($newarray) {?>
       <span>
         _(Array has been **Reset**)_ (_(please configure)_)
@@ -91,7 +91,7 @@ effect of making it ***impossible*** to rebuild an existing failed drive - you h
     <?}?>
   </div>
 
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
+  <div class="flex flex-wrap items-center gap-4">
     <input type="submit" class="lock" name="cmdInit" value="_(Apply)_" disabled>
     <input type="button" class="lock" value="_(Done)_" onclick="done()">
   </div>
diff --git a/emhttp/plugins/dynamix/NewPerms.page b/emhttp/plugins/dynamix/NewPerms.page
index 985b2d003..70f5726f2 100644
--- a/emhttp/plugins/dynamix/NewPerms.page
+++ b/emhttp/plugins/dynamix/NewPerms.page
@@ -92,9 +92,9 @@ Note that this tool may negatively affect any docker containers if you allow you
 :end
 
 <form markdown="1" method="POST" action="/update.htm" target="progressFrame">
-<div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
-    <span style="font-weight:600;">_(Target)_:</span>
+<div class="flex flex-col gap-4 items-start">
+  <div class="flex flex-wrap items-center gap-4">
+    <span class="strong">_(Target)_:</span>
     <div class="inline-block">
       <select name="select" onchange="selection(this.value,true)">
         <?=mk_option(0,"0","_(Disks)_")?>
@@ -103,19 +103,19 @@ Note that this tool may negatively affect any docker containers if you allow you
     </div>
   </div>
 
-  <div style="display:flex;flex-direction:column;gap:1rem;align-items:flex-start;">
-    <span style="font-weight:600;">_(Items)_:</span>
-    <div class="flex flex-col gap-2" style="align-items:flex-start;">
+  <div class="flex flex-col gap-4 items-start">
+    <span class="strong">_(Items)_:</span>
+    <div class="flex flex-col gap-2 items-start">
       <div id="disks">
-        <select id="s1" name="disks" style="display:none" multiple>
+        <select id="s1" name="disks" class="hidden" multiple>
           <option value=''>_(All)_</option>
           <?foreach (array_filter($disks,'data_disks') as $disk):?>
           <?=mk_option(1,"/mnt/{$disk['name']}",_(my_disk($disk['name'])),3)?>
           <?endforeach;?>
         </select>
       </div>
-      <div id="shares" style="display:none">
-        <select id="s2" name="shares" style="display:none" multiple>
+      <div id="shares" class="hidden">
+        <select id="s2" name="shares" class="hidden" multiple>
           <option value=''>_(All)_</option>
           <?uksort($shares,'strnatcasecmp');?>
           <?foreach ($shares as $share):?>
@@ -126,7 +126,7 @@ Note that this tool may negatively affect any docker containers if you allow you
     </div>
   </div>
 
-  <div style="display:flex;flex-wrap:wrap;align-items:center;gap:1rem;">
+  <div class="flex flex-wrap items-center gap-4">
     <?if (_var($var,'fsState')=="Started"):?>
       <input type="button" value="_(Start)_" onclick="setNewPerms(this.form)">
       <input type="button" value="_(Done)_" class="lock" onclick="done()">