Skip to content

Fix GoalTracker progress overflow issue#330

Closed
Akankshya-35-45 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
Akankshya-35-45:fix-goaltracker-overflow
Closed

Fix GoalTracker progress overflow issue#330
Akankshya-35-45 wants to merge 2 commits into
Priyanshu-byte-coder:mainfrom
Akankshya-35-45:fix-goaltracker-overflow

Conversation

@Akankshya-35-45
Copy link
Copy Markdown

Summary

Fixes the GoalTracker progress bar overflow issue when the current value exceeds the target value.

Closes #243

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactor / code cleanup

Changes Made

  • Added a width cap using Math.min()
  • Prevented the progress bar from exceeding 100% width
  • Ensured the progress bar stays within the rounded container

How to Test

Steps for the reviewer to verify this works:

  1. Run the project locally using npm run dev
  2. Create a goal with target = 5
  3. Set current value greater than target (e.g. 8)
  4. Verify that the progress bar does not overflow the container
  5. Confirm the progress bar width is capped at 100%

Screenshots (if UI change)

N/A

Checklist

  • Linked issue in summary
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Self-reviewed the diff
  • Added/updated tests if applicable

Copilot AI review requested due to automatic review settings May 18, 2026 16:29
@vercel
Copy link
Copy Markdown

vercel Bot commented May 18, 2026

@Akankshya-35-45 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your first PR on DevTrack! 🎉

A maintainer will review it within 48 hours. While you wait:

  • Make sure CI is passing (type-check + lint)
  • Double-check the PR description is filled out and the issue is linked
  • Feel free to ask questions in Discussions if you need help

Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Clamps the goal progress bar width to avoid overflowing past 100%.

Changes:

  • Limit the computed progress percentage used for the bar width to a maximum of 100%.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/components/GoalTracker.tsx Outdated
<div
className={`h-full rounded-full transition-all ${completed ? "bg-emerald-500" : "bg-[var(--accent)]"}`}
style={{ width: `${pct}%` }}
style={{ width: `${Math.min(pct, 100)}%` }}
@Akankshya-35-45
Copy link
Copy Markdown
Author

Thanks for the suggestion! Updated the logic to clamp the progress value between 0 and 100 using Math.max(0, Math.min(pct, 100)) to handle negative values as well.

@Priyanshu-byte-coder
Copy link
Copy Markdown
Owner

Thanks for the fix! The progress bar overflow bug has already been fixed in PR #286 which was just merged. That PR also resolves this issue alongside the confetti feature. This PR is now conflicting with main.

The core fix (Math.min cap) is correct — it was just merged via a different PR. Closing this as resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] GoalTracker progress bar overflows container when current value exceeds target

3 participants