[UI] Improve Mobile Bottom Sheet 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
- Labels:
good first issue,ui,difficulty:beginner,area:dashboard - Target File:
src/features/tasks/components/task-form-modal.tsx - Estimated Time: 10–15 minutes
- Difficulty: Level 2 (Beginner)
Why This Matters
On mobile viewports (< 640px), form action buttons in modals should have adequate safe-area bottom padding to prevent overlap with mobile browser navigation bars.
Current Behavior
The modal footer in src/features/tasks/components/task-form-modal.tsx has fixed padding p-4.
Requested Change
Update the modal footer container to use responsive padding: p-4 pb-6 sm:pb-4.
Acceptance Criteria
- Responsive padding applied in
src/features/tasks/components/task-form-modal.tsx. - Modal displays cleanly on both mobile (
375px) and desktop (1280px).
Verification
npm run lint
npx tsc --noEmit
Contributor Notes
CSS utility tweak in one file.
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 modal footer with the fixed p-4 padding. Check the responsive utility classes, then run npm run lint and npx tsc --noEmit. Done means the footer has adequate spacing at 375px and retains the expected desktop spacing at 1280px.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 96/100