From 2d2d283588325d3b50026f5d3c2fccbdf430d0e8 Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Fri, 18 Jul 2025 04:43:55 +0000
Subject: [PATCH] on this step , make the whole box clickable ... not just the
 checkbox

---
 .../cost-estimator/step-9-additional-features.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/cost-estimator/step-9-additional-features.tsx b/src/components/cost-estimator/step-9-additional-features.tsx
index fa8192c..2496517 100644
--- a/src/components/cost-estimator/step-9-additional-features.tsx
+++ b/src/components/cost-estimator/step-9-additional-features.tsx
@@ -83,9 +83,9 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
       <h2 className="font-headline text-3xl font-bold tracking-tight text-center">Would you like us to develop any additional features?</h2>
       <div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
         {features.map((feature) => (
-            <div
+            <Label
                 key={feature.id}
-                onClick={() => handleSelect(feature.id)}
+                htmlFor={feature.id}
                 className={`flex items-center space-x-3 rounded-lg border p-4 cursor-pointer transition-all ${selectedFeatures.includes(feature.id) ? 'border-primary bg-primary/5' : 'border-border'}`}
             >
                 <Checkbox
@@ -93,11 +93,11 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
                     checked={selectedFeatures.includes(feature.id)}
                     onCheckedChange={() => handleSelect(feature.id)}
                 />
-                <Label htmlFor={feature.id} className="text-base font-medium flex-1 cursor-pointer">{feature.label}</Label>
+                <span className="text-base font-medium flex-1">{feature.label}</span>
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger asChild>
-                            <button type="button" className="text-muted-foreground hover:text-foreground">
+                            <button type="button" className="text-muted-foreground hover:text-foreground" onClick={(e) => e.preventDefault()}>
                                 <Info className="h-4 w-4" />
                             </button>
                         </TooltipTrigger>
@@ -106,7 +106,7 @@ export function Step9AdditionalFeatures({ onNext, onBack, onUpdateData, formData
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>
-            </div>
+            </Label>
         ))}
       </div>
        <div className="mt-16 flex w-full items-center justify-between">