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

@@ -51,16 +51,16 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
     return (
       <button
         onClick={() => setIsCreating(true)}
-        className="w-full flex items-center gap-2 px-4 py-3 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 transition-colors"
+        className="w-full flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 active:text-blue-700 transition-colors tap-target text-sm sm:text-base font-medium"
       >
-        <Plus size={20} />
+        <Plus size={20} className="flex-shrink-0" />
         <span>Add a task</span>
       </button>
     )
   }
 
   return (
-    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4">
+    <form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
       <input
         type="text"
         value={title}
@@ -68,23 +68,23 @@ export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
         onKeyDown={handleKeyDown}
         placeholder="Enter task title..."
         autoFocus
-        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3"
+        className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
       />
-      <div className="flex gap-2">
-        <button
-          type="submit"
-          disabled={!title.trim() || isSubmitting}
-          className="px-4 py-2 bg-blue-500 hover:bg-blue-600 disabled:bg-blue-300 text-white rounded-lg transition-colors text-sm"
-        >
-          {isSubmitting ? 'Adding...' : 'Add Task'}
-        </button>
+      <div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
         <button
           type="button"
           onClick={handleCancel}
-          className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg transition-colors text-sm"
+          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
         >
           Cancel
         </button>
+        <button
+          type="submit"
+          disabled={!title.trim() || isSubmitting}
+          className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
+        >
+          {isSubmitting ? 'Adding...' : 'Add Task'}
+        </button>
       </div>
     </form>
   )