From a037117b15855213da41bbb99090ea553c8519bb Mon Sep 17 00:00:00 2001 From: Paul Bailey Date: Mon, 1 Dec 2025 20:54:54 +0000 Subject: [PATCH] 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 --- .kiro/specs/ultimate-lists-app/tasks.md | 2 +- app/globals.css | 44 +++++++++++++ app/list/[id]/item/[itemId]/edit/page.tsx | 12 ++-- app/list/[id]/item/[itemId]/page.tsx | 18 +++--- app/list/[id]/page.tsx | 18 +++--- app/page.tsx | 16 ++--- components/DeleteItemButton.tsx | 10 +-- components/DeleteListButton.tsx | 12 ++-- components/FilterPanel.tsx | 75 +++++++++++----------- components/InlineItemCreate.tsx | 26 ++++---- components/ItemCard.tsx | 33 +++++----- components/ItemForm.tsx | 59 ++++++++--------- components/ListCard.tsx | 24 +++---- components/ListForm.tsx | 22 +++---- components/Modal.tsx | 14 ++-- components/NewListButton.tsx | 7 +- components/SearchBar.tsx | 8 +-- components/ToggleItemButton.tsx | 12 ++-- public/apple-touch-icon.png | Bin 0 -> 3228 bytes public/favicon-32.png | Bin 0 -> 597 bytes public/icon-192.png | Bin 0 -> 3430 bytes public/icon-512.png | Bin 0 -> 13204 bytes 22 files changed, 230 insertions(+), 182 deletions(-) create mode 100644 public/apple-touch-icon.png create mode 100644 public/favicon-32.png create mode 100644 public/icon-192.png create mode 100644 public/icon-512.png diff --git a/.kiro/specs/ultimate-lists-app/tasks.md b/.kiro/specs/ultimate-lists-app/tasks.md index d572aaa..1c2645d 100644 --- a/.kiro/specs/ultimate-lists-app/tasks.md +++ b/.kiro/specs/ultimate-lists-app/tasks.md @@ -184,7 +184,7 @@ - Test "Add to Home Screen" functionality in Safari - _Requirements: 4.1, 4.2_ -- [ ] 14. Implement responsive design enhancements +- [x] 14. Implement responsive design enhancements - Ensure all components are mobile-responsive - Add touch-optimized controls (larger tap targets) - Test on various screen sizes diff --git a/app/globals.css b/app/globals.css index 8136de0..5c9332e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -9,4 +9,48 @@ mark { padding: 0 2px; border-radius: 2px; font-weight: 500; +} + +/* Touch-optimized tap targets - minimum 44x44px for iOS */ +@layer utilities { + .tap-target { + min-width: 44px; + min-height: 44px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .tap-target-sm { + min-width: 40px; + min-height: 40px; + display: inline-flex; + align-items: center; + justify-content: center; + } +} + +/* Smooth scrolling for better mobile experience */ +@layer base { + html { + -webkit-tap-highlight-color: transparent; + scroll-behavior: smooth; + } + + /* Improve touch scrolling on iOS */ + body { + -webkit-overflow-scrolling: touch; + } + + /* Better focus states for accessibility */ + *:focus-visible { + outline: 2px solid #3B82F6; + outline-offset: 2px; + } + + /* Prevent text selection on buttons for better mobile UX */ + button { + -webkit-tap-highlight-color: transparent; + user-select: none; + } } \ No newline at end of file diff --git a/app/list/[id]/item/[itemId]/edit/page.tsx b/app/list/[id]/item/[itemId]/edit/page.tsx index c26fbc6..4cccfc4 100644 --- a/app/list/[id]/item/[itemId]/edit/page.tsx +++ b/app/list/[id]/item/[itemId]/edit/page.tsx @@ -19,21 +19,21 @@ export default async function EditItemPage({ params }: PageProps) { } return ( -
+
{/* Header */} -
+
- + Back -

Edit Task

+

Edit Task

{/* Form */} -
+
diff --git a/app/list/[id]/item/[itemId]/page.tsx b/app/list/[id]/item/[itemId]/page.tsx index 27a988b..bf4787e 100644 --- a/app/list/[id]/item/[itemId]/page.tsx +++ b/app/list/[id]/item/[itemId]/page.tsx @@ -2,7 +2,7 @@ import { notFound } from 'next/navigation' import { getItem } from '@/lib/actions' import ItemDetail from '@/components/ItemDetail' import Link from 'next/link' -import { ArrowLeft, Edit, Trash2 } from 'lucide-react' +import { ArrowLeft, Edit } from 'lucide-react' import DeleteItemButton from '@/components/DeleteItemButton' import ToggleItemButton from '@/components/ToggleItemButton' @@ -21,24 +21,24 @@ export default async function ItemDetailPage({ params }: PageProps) { } return ( -
+
{/* Header Actions */} -
+
- + Back to List -
+
- + Edit @@ -46,7 +46,7 @@ export default async function ItemDetailPage({ params }: PageProps) {
{/* Item Detail */} -
+
diff --git a/app/list/[id]/page.tsx b/app/list/[id]/page.tsx index 381bb93..8b20fe7 100644 --- a/app/list/[id]/page.tsx +++ b/app/list/[id]/page.tsx @@ -15,32 +15,32 @@ export default async function ListDetailPage({ params }: { params: { id: string const completedItems = list.items.filter(item => item.completed) return ( -
+
{/* Header */} -
+
- + Back to Lists -
+
-

{list.title}

+

{list.title}

-

+

{completedItems.length} of {list.items.length} tasks completed

{/* Inline Item Creation */} -
+
diff --git a/app/page.tsx b/app/page.tsx index 253fd80..1949114 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,27 +7,27 @@ export default async function Home() { const lists = await getLists() return ( -
-
-

Ultimate Lists

+
+
+

Ultimate Lists

{/* Global Search */} -
+
-
+
{lists.map((list) => ( ))}
{lists.length === 0 && ( -
-

No lists yet

-

Create your first list to get started

+
+

No lists yet

+

Create your first list to get started

)}
diff --git a/components/DeleteItemButton.tsx b/components/DeleteItemButton.tsx index a241778..55aa840 100644 --- a/components/DeleteItemButton.tsx +++ b/components/DeleteItemButton.tsx @@ -52,14 +52,14 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D @@ -71,7 +71,7 @@ export default function DeleteItemButton({ itemId, listId, variant = 'full' }: D return ( ) diff --git a/components/DeleteListButton.tsx b/components/DeleteListButton.tsx index c5ac822..03e604c 100644 --- a/components/DeleteListButton.tsx +++ b/components/DeleteListButton.tsx @@ -45,7 +45,7 @@ export default function DeleteListButton({ <> diff --git a/components/FilterPanel.tsx b/components/FilterPanel.tsx index 7b79fde..81554f8 100644 --- a/components/FilterPanel.tsx +++ b/components/FilterPanel.tsx @@ -92,27 +92,27 @@ export default function FilterPanel({ {/* Header */} {/* Filter Controls */} {isExpanded && ( -
+
{/* Sort Controls */}