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

@@ -42,27 +42,27 @@ export default function Modal({ isOpen, onClose, title, children }: ModalProps)
   if (!isOpen) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-black bg-opacity-50"
+        className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
         onClick={onClose}
       />
       
       {/* Modal */}
-      <div className="relative bg-white rounded-lg shadow-xl max-w-md w-full mx-4 max-h-[90vh] overflow-y-auto">
-        <div className="flex items-center justify-between p-4 border-b border-gray-200">
-          <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+      <div className="relative bg-white rounded-t-2xl sm:rounded-lg shadow-xl max-w-md w-full mx-0 sm:mx-4 max-h-[90vh] overflow-y-auto transform transition-transform">
+        <div className="flex items-center justify-between p-4 sm:p-5 border-b border-gray-200 sticky top-0 bg-white z-10">
+          <h2 className="text-lg sm:text-xl font-semibold text-gray-900">{title}</h2>
           <button
             onClick={onClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
+            className="text-gray-400 hover:text-gray-600 active:text-gray-700 transition-colors tap-target-sm -mr-2"
             aria-label="Close modal"
           >
             <X size={24} />
           </button>
         </div>
         
-        <div className="p-4">
+        <div className="p-4 sm:p-5">
           {children}
         </div>
       </div>