From 9548f6c63d84c3420c7183447c2598565cc4a517 Mon Sep 17 00:00:00 2001
From: wefalltomorrow <45746576+wefalltomorrow@users.noreply.github.com>
Date: Tue, 8 Sep 2026 19:45:05 +1000
Subject: [PATCH 1/2] Clean up settings page layout

---
 src/ui/index.html | 121 +++++++++++++++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 44 deletions(-)

diff --git a/src/ui/index.html b/src/ui/index.html
index d1c39cb..afa2205 100644
--- a/src/ui/index.html
+++ b/src/ui/index.html
@@ -96,52 +96,85 @@ <h1>C<span class="sml">o<span class="sml">m<span class="sml">p<span class="sml">
     </section>
 
     <section class="page" id="Settings" style="display: none;">
-      <label>File patterns to exclude from compression<br>
-        <textarea name="exclude" id="Excludes" spellcheck="false" wrap="off"
-></textarea>
-      </label>
+      <div class="settings-panel">
+        <div class="settings-heading">
+          <h2>File exclusions</h2>
+          <p>One pattern per line. Matching files and folders are skipped.</p>
+        </div>
+        <textarea name="exclude" id="Excludes" spellcheck="false" wrap="off"></textarea>
+      </div>
 
-      <br>
+      <div class="settings-panel">
+        <div class="settings-heading">
+          <h2>Compression</h2>
+          <p>Choose how Compactor analyses and compresses eligible files.</p>
+        </div>
 
-      <label>Compression
-        <select id="Compression_Mode" name="Compression">
-          <option value="XPRESS4K">XPRESS4K (fast, low compression)</option>
-          <option value="XPRESS8K">XPRESS8K</option>
-          <option value="XPRESS16K">XPRESS16K</option>
-          <option value="LZX">LZX (default, slow, high compression)</option>
-        </select></label>
-
-      <label>Minimum estimated savings
-        <input id="Min_Savings" name="Min_Savings" type="number" min="0" max="100" step="0.1" value="1" style="width: 70px">%
-      </label>
-
-      <label>Maximum threads
-        <input id="Max_Threads" name="Max_Threads" type="number" min="0" max="16" step="1" value="0" style="width: 70px"> <small title="Auto uses up to 8 analysis workers and up to 16 XPRESS compression workers on SSDs. LZX Auto uses a conservative 1-2 workers. A manual limit is respected for LZX too; the HDD single-thread safeguard still applies.">0 = Auto (hardware-aware)</small>
-      </label>
-
-      <label>Compression priority
-        <select id="Compression_Priority" name="Compression_Priority">
-          <option value="Lowest">Lowest</option>
-          <option value="BelowNormal">Below Normal (default)</option>
-          <option value="Normal">Normal</option>
-          <option value="AboveNormal">Above Normal</option>
-          <option value="Highest">Highest</option>
-        </select> <small title="Applies only to compression/decompression worker threads. Analysis and the GUI remain at normal priority.">worker threads only</small>
-      </label>
-
-      <label>
-        <input id="HDD_Single_Thread" name="HDD_Single_Thread" type="checkbox" checked> HDDs only use 1 thread
-      </label>
-
-      <label>Units
-        <select id="SI_Units" name="SI_Units">
-          <option value="I">Binary (MiB)</option>
-          <option value="D">Decimal (MB)</option>
-        </select>
-      </label>
-
-      <button id="Button_Save" class="save">Save</button>
-      <button id="Button_Reset" class="cancel">Reset</button>
+        <div class="settings-grid">
+          <label class="setting-field">
+            <span class="setting-label">Compression algorithm</span>
+            <select id="Compression_Mode" name="Compression">
+              <option value="XPRESS4K">XPRESS4K (fast, low compression)</option>
+              <option value="XPRESS8K">XPRESS8K</option>
+              <option value="XPRESS16K">XPRESS16K</option>
+              <option value="LZX">LZX (default, slow, high compression)</option>
+            </select>
+          </label>
+
+          <label class="setting-field">
+            <span class="setting-label">Minimum estimated savings</span>
+            <span class="setting-inline">
+              <input id="Min_Savings" name="Min_Savings" type="number" min="0" max="100" step="0.1" value="1">
+              <span class="setting-suffix">%</span>
+            </span>
+            <small class="setting-help">Files below this estimated saving are skipped.</small>
+          </label>
+
+          <label class="setting-field">
+            <span class="setting-label">Maximum worker threads</span>
+            <input id="Max_Threads" name="Max_Threads" type="number" min="0" max="16" step="1" value="0">
+            <small class="setting-help">0 = Auto. LZX Auto uses 1–2 workers; a manual value is respected.</small>
+          </label>
+
+          <label class="setting-field">
+            <span class="setting-label">Worker priority</span>
+            <select id="Compression_Priority" name="Compression_Priority">
+              <option value="Lowest">Lowest</option>
+              <option value="BelowNormal">Below Normal (default)</option>
+              <option value="Normal">Normal</option>
+              <option value="AboveNormal">Above Normal</option>
+              <option value="Highest">Highest</option>
+            </select>
+            <small class="setting-help">Compression/decompression workers only; the UI and analysis stay at Normal priority.</small>
+          </label>
+
+          <label class="setting-field setting-toggle">
+            <span class="setting-checkline">
+              <input id="HDD_Single_Thread" name="HDD_Single_Thread" type="checkbox" checked>
+              <span>Limit HDDs to 1 worker</span>
+            </span>
+            <small class="setting-help">Recommended to avoid excessive seeking on mechanical drives.</small>
+          </label>
+        </div>
+      </div>
+
+      <div class="settings-panel settings-display">
+        <div class="settings-heading">
+          <h2>Display</h2>
+        </div>
+        <label class="setting-field">
+          <span class="setting-label">Units</span>
+          <select id="SI_Units" name="SI_Units">
+            <option value="I">Binary (MiB)</option>
+            <option value="D">Decimal (MB)</option>
+          </select>
+        </label>
+      </div>
+
+      <div class="settings-actions">
+        <button id="Button_Reset" class="cancel">Reset</button>
+        <button id="Button_Save" class="save">Save</button>
+      </div>
     </section>
 
     <section class="page" id="About" style="display: none;">

From 74ea4d23103e6409e325697e415be0e22e7bbb1b Mon Sep 17 00:00:00 2001
From: wefalltomorrow <45746576+wefalltomorrow@users.noreply.github.com>
Date: Tue, 8 Sep 2026 19:45:54 +1000
Subject: [PATCH 2/2] Style settings page for clear responsive layout

---
 src/ui/style.css | 172 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 172 insertions(+)

diff --git a/src/ui/style.css b/src/ui/style.css
index d047af2..8ec20ad 100644
--- a/src/ui/style.css
+++ b/src/ui/style.css
@@ -326,3 +326,175 @@ li {
   opacity: 0.45;
 }
 
+/* Settings */
+#Settings {
+  max-width: 1100px;
+  margin: 18px auto;
+  padding: 0 18px 18px;
+  box-sizing: border-box;
+}
+
+#Settings .settings-panel {
+  margin: 0 0 14px;
+  padding: 14px 16px 16px;
+  border: 1px solid #555;
+  border-radius: 6px;
+  background-color: #373737;
+  box-sizing: border-box;
+}
+
+#Settings .settings-heading {
+  margin-bottom: 10px;
+}
+
+#Settings .settings-heading h2 {
+  margin: 0 0 3px;
+  font-size: 1.05em;
+  font-weight: 600;
+  color: #fff;
+}
+
+#Settings .settings-heading p {
+  margin: 0;
+  color: #bdbdbd;
+  font-size: 0.78em;
+  line-height: 1.35;
+}
+
+#Settings textarea,
+#Settings input,
+#Settings select {
+  color: #eee;
+  background-color: #20262d;
+  border-color: #15191d;
+  box-sizing: border-box;
+}
+
+#Settings textarea {
+  display: block;
+  width: 100%;
+  height: 170px;
+  min-height: 110px;
+  margin: 0;
+  padding: 8px;
+  resize: vertical;
+  font-size: 0.95em;
+  line-height: 1.35;
+}
+
+#Settings .settings-grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -6px;
+}
+
+#Settings .setting-field {
+  display: flex;
+  flex-direction: column;
+  width: calc(50% - 12px);
+  min-width: 0;
+  margin: 6px;
+  box-sizing: border-box;
+}
+
+#Settings .setting-label {
+  margin-bottom: 5px;
+  color: #f2f2f2;
+  font-size: 0.86em;
+  font-weight: 600;
+}
+
+#Settings .setting-field > select {
+  width: 100%;
+  min-height: 34px;
+  margin: 0;
+  font-size: 0.92em;
+}
+
+#Settings .setting-field > input[type="number"] {
+  width: 110px;
+  min-height: 34px;
+  margin: 0;
+  font-size: 0.92em;
+}
+
+#Settings .setting-inline {
+  display: flex;
+  align-items: center;
+}
+
+#Settings .setting-inline input[type="number"] {
+  width: 110px;
+  min-height: 34px;
+  margin: 0;
+  font-size: 0.92em;
+}
+
+#Settings .setting-suffix {
+  margin-left: 6px;
+  color: #ddd;
+}
+
+#Settings .setting-help {
+  display: block;
+  margin-top: 5px;
+  color: #bdbdbd;
+  font-size: 0.72em;
+  line-height: 1.35;
+}
+
+#Settings .setting-toggle {
+  width: calc(100% - 12px);
+  padding-top: 3px;
+}
+
+#Settings .setting-checkline {
+  display: flex;
+  align-items: center;
+  font-size: 0.88em;
+  font-weight: 600;
+}
+
+#Settings .setting-checkline input[type="checkbox"] {
+  width: auto;
+  margin: 0 7px 0 0;
+  padding: 0;
+}
+
+#Settings .setting-toggle .setting-help {
+  margin-left: 24px;
+}
+
+#Settings .settings-display .setting-field {
+  width: 320px;
+  max-width: 100%;
+  margin: 0;
+}
+
+#Settings .settings-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top: 2px;
+}
+
+#Settings .settings-actions button {
+  min-width: 78px;
+}
+
+#Settings .settings-actions .cancel {
+  background-color: rgb(118, 118, 118);
+}
+
+@media (max-width: 800px) {
+  #Settings {
+    margin-top: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  #Settings .setting-field,
+  #Settings .setting-toggle {
+    width: calc(100% - 12px);
+  }
+}