feat: implement responsive design enhancements

- Add touch-optimized tap targets (44x44px minimum for iOS)
- Enhance mobile responsiveness across all components
- Improve button sizing and spacing for touch interactions
- Add responsive text sizing and layout adjustments
- Implement mobile-first modal behavior (bottom sheet on mobile)
- Enhance form controls with better touch targets
- Add active states for better touch feedback
- Improve grid layouts for various screen sizes
- Add smooth scrolling and better focus states
- Optimize FilterPanel for mobile with grid layouts
- Enhance all interactive elements with tap-target classes

Requirements: 7.1, 7.2

components/ToggleItemButton.tsx

@@ -31,13 +31,13 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
       <button
         onClick={handleToggle}
         disabled={isToggling}
-        className="hover:scale-110 transition-transform disabled:opacity-50"
+        className="hover:scale-110 active:scale-95 transition-transform disabled:opacity-50 tap-target-sm"
         aria-label={completed ? 'Mark incomplete' : 'Mark complete'}
       >
         {completed ? (
-          <CheckCircle2 size={20} className="text-green-500" />
+          <CheckCircle2 size={22} className="text-green-500" />
         ) : (
-          <Circle size={20} className="text-gray-400 hover:text-gray-600" />
+          <Circle size={22} className="text-gray-400 hover:text-gray-600 active:text-gray-700" />
         )}
       </button>
     )
@@ -47,16 +47,16 @@ export default function ToggleItemButton({ itemId, completed, variant = 'full' }
     <button
       onClick={handleToggle}
       disabled={isToggling}
-      className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors"
+      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
     >
       {completed ? (
         <>
-          <CheckCircle2 size={18} className="text-green-500" />
+          <CheckCircle2 size={18} className="text-green-500 flex-shrink-0" />
           <span>Mark Incomplete</span>
         </>
       ) : (
         <>
-          <Circle size={18} />
+          <Circle size={18} className="flex-shrink-0" />
           <span>Mark Complete</span>
         </>
       )}