ui: improve responsive padding on finance summary cards
Open
Beginner friendly
Nobody has claimed this yet.
area:finance
beginner friendly
community
difficulty:beginner
good first issue
help wanted
time:<15m
type:ui
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
🎯 What needs to be done
Optimize mobile grid padding (p-4 sm:p-6) on the Income, Expense, and Net Cash Flow summary cards in finance-summary-cards.tsx.
Why this matters
On narrow mobile screens (375px), large numbers in integer-cents formatting can wrap awkwardly if card padding is too generous.
📍 Where to work
src/features/finance/components/finance-summary-cards.tsx
✅ Acceptance criteria
- Finance summary numbers fit comfortably without text clipping on 375px mobile viewports.
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/finance/components/finance-summary-cards.tsx and inspect the Income, Expense, and Net Cash Flow card padding classes. Check the cards at a 375px mobile viewport with integer-cents values, then adjust the responsive padding so the finance summary numbers fit comfortably without clipping.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100