Fix toggle switches not being clickable

Changed toggle wrapper from div to label so clicking
the slider visual actually toggles the checkbox.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 18:42:19 -04:00
parent ef2ff0c58c
commit cddae24e34
+10 -10
View File
@@ -62,7 +62,7 @@
align-items: center; align-items: center;
padding: 8px 0; padding: 8px 0;
} }
.toggle-row label { .toggle-row span {
margin: 0; margin: 0;
color: #eee; color: #eee;
font-size: 13px; font-size: 13px;
@@ -222,25 +222,25 @@
<div class="section"> <div class="section">
<div class="toggle-row"> <div class="toggle-row">
<label>Monitor Enabled</label> <span>Monitor Enabled</span>
<div class="toggle"> <label class="toggle" for="enabled">
<input type="checkbox" id="enabled" checked> <input type="checkbox" id="enabled" checked>
<span class="slider"></span> <span class="slider"></span>
</div> </label>
</div> </div>
<div class="toggle-row"> <div class="toggle-row">
<label>Notify New Products</label> <span>Notify New Products</span>
<div class="toggle"> <label class="toggle" for="notifyNew">
<input type="checkbox" id="notifyNew" checked> <input type="checkbox" id="notifyNew" checked>
<span class="slider"></span> <span class="slider"></span>
</div> </label>
</div> </div>
<div class="toggle-row"> <div class="toggle-row">
<label>Notify Restocks</label> <span>Notify Restocks</span>
<div class="toggle"> <label class="toggle" for="notifyRestock">
<input type="checkbox" id="notifyRestock" checked> <input type="checkbox" id="notifyRestock" checked>
<span class="slider"></span> <span class="slider"></span>
</div> </label>
</div> </div>
</div> </div>