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

@@ -45,7 +45,7 @@ export default function DeleteListButton({
     <>
       <button
         onClick={() => setIsConfirmOpen(true)}
-        className="text-red-600 hover:text-red-700 transition-colors p-2 hover:bg-red-50 rounded-lg"
+        className="text-red-600 hover:text-red-700 active:text-red-800 transition-colors tap-target-sm hover:bg-red-50 active:bg-red-100 rounded-lg"
         aria-label="Delete list"
       >
         <Trash2 size={20} />
@@ -57,26 +57,26 @@ export default function DeleteListButton({
         title="Delete List"
       >
         <div className="space-y-4">
-          <p className="text-gray-700">
+          <p className="text-gray-700 text-sm sm:text-base">
             Are you sure you want to delete <strong>{listTitle}</strong>?
           </p>
           {itemCount > 0 && (
-            <p className="text-red-600 text-sm">
+            <p className="text-red-600 text-xs sm:text-sm font-medium">
               This will permanently delete {itemCount} {itemCount === 1 ? 'item' : 'items'}.
             </p>
           )}
-          <div className="flex gap-2 justify-end pt-2">
+          <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 justify-end pt-2">
             <button
               onClick={() => setIsConfirmOpen(false)}
               disabled={isDeleting}
-              className="px-4 py-2 text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
+              className="w-full sm:w-auto px-4 sm:px-5 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 active:bg-gray-300 rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
             >
               Cancel
             </button>
             <button
               onClick={handleDelete}
               disabled={isDeleting}
-              className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors disabled:opacity-50"
+              className="w-full sm:w-auto px-4 sm:px-5 py-3 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
             >
               {isDeleting ? 'Deleting...' : 'Delete'}
             </button>