Admin/Todo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement responsive design enhancements

Browse Source 
- 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
This commit is contained in:
Paul Bailey
2025-12-01 20:54:54 +00:00
parent 6cb9a593d4
commit a037117b15
22 changed files with 230 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/ListForm.tsx
View File

@@ -66,9 +66,9 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-5">
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
List Title
</label>
<input
@@ -76,7 +76,7 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
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 text-sm sm:text-base"
placeholder="Enter list title"
disabled={isSubmitting}
autoFocus
@@ -84,19 +84,19 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
<label className="block text-sm font-medium text-gray-700 mb-2 sm:mb-3">
Color
</label>
<div className="flex gap-2 flex-wrap">
<div className="flex gap-2 sm:gap-3 flex-wrap">
{PRESET_COLORS.map((presetColor) => (
<button
key={presetColor}
type="button"
onClick={() => setColor(presetColor)}
className={`w-10 h-10 rounded-lg transition-all ${
className={`w-11 h-11 sm:w-12 sm:h-12 rounded-lg transition-all tap-target-sm ${
color === presetColor
? 'ring-2 ring-offset-2 ring-gray-400 scale-110'
: 'hover:scale-105'
: 'hover:scale-105 active:scale-95'
}`}
style={{ backgroundColor: presetColor }}
disabled={isSubmitting}
@@ -107,16 +107,16 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
</div>
{error && (
<div className="text-red-600 text-sm">{error}</div>
<div className="text-red-600 text-xs sm:text-sm font-medium">{error}</div>
)}
<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">
{onCancel && (
<button
type="button"
onClick={onCancel}
disabled={isSubmitting}
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>
@@ -124,7 +124,7 @@ export default function ListForm({ list, onCancel, onSuccess }: ListFormProps) {
<button
type="submit"
disabled={isSubmitting}
className="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors disabled:opacity-50"
className="w-full sm:w-auto px-4 sm:px-5 py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50 tap-target font-medium text-sm sm:text-base"
>
{isSubmitting ? 'Saving...' : list ? 'Update List' : 'Create List'}
</button>