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/DeleteItemButton.tsx

@@ -52,14 +52,14 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
         <button
           onClick={handleDelete}
           disabled={isDeleting}
-          className="px-3 py-2 bg-red-500 hover:bg-red-600 disabled:bg-red-300 text-white rounded-lg text-sm transition-colors"
+          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 disabled:bg-red-300 text-white rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
           {isDeleting ? 'Deleting...' : 'Confirm'}
         </button>
         <button
           onClick={handleCancel}
           disabled={isDeleting}
-          className="px-3 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-sm transition-colors"
+          className="px-3 sm:px-4 py-2 sm:py-2.5 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg text-xs sm:text-sm transition-colors tap-target-sm font-medium"
         >
           Cancel
         </button>
@@ -71,7 +71,7 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
     return (
       <button
         onClick={handleShowConfirm}
-        className="text-gray-400 hover:text-red-600 transition-colors p-2 hover:bg-red-50 rounded-lg"
+        className="text-gray-400 hover:text-red-600 active:text-red-700 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
         aria-label="Delete item"
       >
         <Trash2 size={18} />
@@ -82,9 +82,9 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D
   return (
     <button
       onClick={handleShowConfirm}
-      className="flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-colors"
+      className="flex items-center gap-2 px-4 sm:px-5 py-2.5 sm:py-3 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
     >
-      <Trash2 size={18} />
+      <Trash2 size={18} className="flex-shrink-0" />
       <span>Delete</span>
     </button>
   )