From b39bf68f06bb635668e20320f20472b79e11fb6a Mon Sep 17 00:00:00 2001
From: Leopere <colin@nixc.us>
Date: Sun, 8 Feb 2026 16:49:28 -0500
Subject: [PATCH] Move password exclude-ambiguous checkbox to its own row

The checkbox was crammed into the controls flex row alongside the
length/charset/generate button, causing layout issues at narrower
widths. Now sits on its own line between controls and output box
on both the main page and standalone /tools page.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/index.html | 10 ++++------
 src/tools.html | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/index.html b/src/index.html
index fcbb884..6597fe4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -429,14 +429,12 @@
               <option value="hex">Hex</option>
             </select>
           </div>
-          <div class="field" style="display:flex;align-items:flex-end;gap:0.5rem;">
-            <label class="toggle-label" for="pw-no-ambiguous" style="text-transform:none;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:0.4rem;">
-              <input type="checkbox" id="pw-no-ambiguous" checked>
-              Exclude ambiguous <code style="font-size:0.8em;opacity:0.7;">0 O o I l 1 |</code>
-            </label>
-          </div>
           <button id="btn-password" class="btn-primary">Generate</button>
         </div>
+        <label for="pw-no-ambiguous" style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--date-color);cursor:pointer;margin:-0.5rem 0 0;">
+          <input type="checkbox" id="pw-no-ambiguous" checked style="width:auto;">
+          Exclude ambiguous <code style="font-size:0.8em;opacity:0.7;">0 O o I l 1 |</code>
+        </label>
       </div>
 
       <div class="tools-section">
diff --git a/src/tools.html b/src/tools.html
index 28697e7..8318864 100644
--- a/src/tools.html
+++ b/src/tools.html
@@ -169,14 +169,12 @@
           <option value="hex">Hex</option>
         </select>
       </div>
-      <div class="field" style="display:flex;align-items:flex-end;gap:0.5rem;">
-        <label for="pw-no-ambiguous" style="text-transform:none;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:0.4rem;">
-          <input type="checkbox" id="pw-no-ambiguous" checked>
-          Exclude ambiguous <code style="font-size:0.8em;opacity:0.7;">0 O o I l 1 |</code>
-        </label>
-      </div>
       <button id="btn-password" class="btn-primary">Generate</button>
     </div>
+    <label for="pw-no-ambiguous" style="display:flex;align-items:center;gap:0.5rem;font-size:0.85rem;color:var(--date-color);cursor:pointer;margin:-0.5rem 0 0.75rem;">
+      <input type="checkbox" id="pw-no-ambiguous" checked style="width:auto;">
+      Exclude ambiguous <code style="font-size:0.8em;opacity:0.7;">0 O o I l 1 |</code>
+    </label>
     <div class="output copyable" id="out-password" title="Click to copy">Generate a password...</div>
   </div>