From 3cb6ff1c0701d10918427626e6de7833314f9de8 Mon Sep 17 00:00:00 2001
From: utopiaeh <utopiaeh01@gmail.com>
Date: Fri, 21 Aug 2026 11:26:09 +0300
Subject: [PATCH] fix: checkbox should be clickable only on the label or check

---
 components/popup/BehaviorToggles.tsx | 6 +++---
 entrypoints/options/App.tsx          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/popup/BehaviorToggles.tsx b/components/popup/BehaviorToggles.tsx
index c3c4c4b..ba9b861 100644
--- a/components/popup/BehaviorToggles.tsx
+++ b/components/popup/BehaviorToggles.tsx
@@ -16,8 +16,8 @@ export function BehaviorToggles({
   const t = useTranslation();
 
   return (
-    <>
-      <label className="inline-flex items-center gap-2 text-xs text-stone-500 dark:text-stone-400 mb-2 cursor-pointer">
+    <div className="flex flex-col items-start gap-2">
+      <label className="inline-flex items-center gap-2 text-xs text-stone-500 dark:text-stone-400 cursor-pointer">
         <input
           type="checkbox"
           checked={autoReloadAfterClear}
@@ -36,6 +36,6 @@ export function BehaviorToggles({
         />
         {t('useOriginMappings')}
       </label>
-    </>
+    </div>
   );
 }
diff --git a/entrypoints/options/App.tsx b/entrypoints/options/App.tsx
index 27bef4e..d6e7b3a 100644
--- a/entrypoints/options/App.tsx
+++ b/entrypoints/options/App.tsx
@@ -400,7 +400,7 @@ export default function App() {
 
             <hr className="border-stone-200 dark:border-stone-700 mb-3" />
 
-            <div className="flex flex-col gap-2 mb-3">
+            <div className="flex flex-col items-start gap-2 mb-3">
               <label className="inline-flex items-center gap-2 text-sm cursor-pointer">
                 <input
                   type="checkbox"