ui: improve mobile padding in task form modal
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
🎯 What needs to be done
In src/features/tasks/components/task-form-modal.tsx, update the form content container padding from p-4 to p-4 sm:p-6 to ensure comfortable touch targets on mobile while providing clean breathing room on desktop viewports.
Why this matters
Consistent responsive padding prevents form controls and action buttons from feeling cramped on wide screens or colliding with mobile screen edges.
📍 Where to work
src/features/tasks/components/task-form-modal.tsx
🧭 Implementation guidance
- Open
src/features/tasks/components/task-form-modal.tsx. - Find the form body container element.
- Update padding classes to
p-4 sm:p-6. - Ensure modal action buttons remain clearly visible.
✅ Acceptance criteria
- Modal padding adjusts cleanly with
p-4 sm:p-6. - All form fields and action buttons remain fully functional.
🧪 Verification
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open src/features/tasks/components/task-form-modal.tsx and locate the form body container. Change its padding classes to p-4 sm:p-6, then check the modal at mobile and desktop widths to confirm all fields and action buttons remain visible and functional.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100