From 5861189703ae877040afb20a6437ae1327316d5a Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 15:04:32 +0000
Subject: [PATCH] Increase card size in one-by-one mode

Increase the size of boxes and numbers in the one-by-one mode of the interactive.
---
 src/components/BinarySearchTrick.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/BinarySearchTrick.tsx b/src/components/BinarySearchTrick.tsx
index 01ac78d..3d872eb 100644
--- a/src/components/BinarySearchTrick.tsx
+++ b/src/components/BinarySearchTrick.tsx
@@ -239,12 +239,12 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
               selectedCards.includes(card.id) 
                 ? 'ring-2 ring-primary bg-primary/5' 
                 : 'hover:bg-muted/50'
-            }`}
+            } ${isOneByOne ? 'max-w-md w-full' : ''}`}
             onClick={() => handleCardToggle(card.id)}
           >
-            <CardHeader className="pb-2">
+            <CardHeader className={`${isOneByOne ? 'pb-4' : 'pb-2'}`}>
               <div className="flex items-center justify-between">
-                <CardTitle className="text-xl font-bold text-primary">
+                <CardTitle className={`font-bold text-primary ${isOneByOne ? 'text-3xl' : 'text-xl'}`}>
                   {card.id}
                 </CardTitle>
                 <Checkbox 
@@ -254,11 +254,11 @@ const BinarySearchTrick = ({ showSocialShare = true }: BinarySearchTrickProps) =
               </div>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-4 gap-1 text-sm">
+              <div className={`grid grid-cols-4 gap-1 ${isOneByOne ? 'text-lg gap-2' : 'text-sm'}`}>
                 {card.numbers.map((num) => (
                   <div 
                     key={num} 
-                    className="p-1 text-center bg-muted/30 rounded border"
+                    className={`text-center bg-muted/30 rounded border ${isOneByOne ? 'p-3' : 'p-1'}`}
                   >
                     {num}
                   </div>