From ae429a2566059ec05a5916d383eaa60681f85c15 Mon Sep 17 00:00:00 2001
From: Shiv Tyagi <shivtyagi3015@gmail.com>
Date: Tue, 15 Sep 2026 00:24:17 +0530
Subject: [PATCH] frontend: keep features modal visible when toggling a row
 after scroll.

Label clicks on the visually hidden checkbox were scrolling the overflow-hidden dialog panel, which made the modal look blank.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 frontend/src/components/FeaturesModal.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/FeaturesModal.tsx b/frontend/src/components/FeaturesModal.tsx
index 999f6982..f7ba33f0 100644
--- a/frontend/src/components/FeaturesModal.tsx
+++ b/frontend/src/components/FeaturesModal.tsx
@@ -472,7 +472,20 @@ function FeatureRow({ feature, checked, onToggle, catHighlighted, innerRef, pend
                     : checked ? 'bg-yellow-400/5' : 'bg-transparent hover:bg-hover',
             )}
         >
-            <label className="flex items-start gap-3 px-5 py-3 cursor-pointer">
+            <div
+                role="checkbox"
+                aria-checked={checked}
+                aria-label={feature.name}
+                tabIndex={0}
+                className="flex items-start gap-3 px-5 py-3 cursor-pointer"
+                onKeyDown={e => {
+                    if (e.key === ' ' || e.key === 'Enter') {
+                        e.preventDefault();
+                        if (!e.repeat) onToggle(feature.id);
+                    }
+                }}
+                onClick={() => onToggle(feature.id)}
+            >
                 <div
                     className={clsx(
                         'w-4 h-4 rounded border mt-0.5 flex items-center justify-center shrink-0 transition-colors',
@@ -480,12 +493,11 @@ function FeatureRow({ feature, checked, onToggle, catHighlighted, innerRef, pend
                             ? 'dep-warn-check'
                             : checked ? 'bg-yellow-400 border-yellow-400' : 'border-surface-4',
                     )}
-                    onClick={e => { e.preventDefault(); onToggle(feature.id); }}
+                    aria-hidden
                 >
                     {checked && !pendingUncheck && <Check className="w-3 h-3 text-black" />}
                     {pendingUncheck && <Minus className="w-3 h-3 dep-warn-icon" />}
                 </div>
-                <input type="checkbox" className="sr-only" checked={checked} onChange={() => onToggle(feature.id)} />
                 <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 flex-wrap">
                         <span className="text-sm font-medium text-gray-200">{feature.name}</span>
@@ -508,7 +520,7 @@ function FeatureRow({ feature, checked, onToggle, catHighlighted, innerRef, pend
                         <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">{feature.description}</p>
                     )}
                 </div>
-            </label>
+            </div>
 
             {pendingUncheck && activeDependents && activeDependents.length > 0 && (
                 <div className="dep-warn mx-5 mb-3 rounded-lg border overflow-hidden">