Skip to content

fix(goals): clamp progress bar width to 100% max and add Goal Surpass… - #3259

Open
Nareshkumawat-star wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Nareshkumawat-star:fix/goal-tracker-progress-clamp
Open

fix(goals): clamp progress bar width to 100% max and add Goal Surpass…#3259
Nareshkumawat-star wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
Nareshkumawat-star:fix/goal-tracker-progress-clamp

Conversation

@Nareshkumawat-star

Copy link
Copy Markdown

Summary

Fixes progress bar visual overflow in GoalTracker.tsx by clamping progress width to a maximum of 100% (Math.min((current / target) * 100, 100)). Introduces a dedicated "Goal surpassed! 🎯" label and emerald glow ring indicator when a user exceeds their target.

Closes #3246


Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that changes existing behavior)
  • 📝 Documentation update
  • ♻️ Refactor / code cleanup (no functional change)
  • ⚡ Performance improvement
  • 🔒 Security fix
  • 🧪 Tests only

What Changed

  • src/components/GoalTracker.tsx:
    • Clamped progressWidth to 100% max in the style property (Math.min(progressWidth, 100)%).
    • Added Goal surpassed! 🎯 completion label when goal.current > goal.target.
    • Added custom emerald ring and gradient styling when goals are surpassed.
  • test/GoalTracker.test.ts:
    • Added unit test assertion covering surpassed goal completion labels.

How to Test

  1. Set a goal target of 5 commits in Goal Tracker.
  2. Make 6 or more commits (or edit current to be higher than target).
  3. Verify that the progress bar stops exactly at 100% width without overflowing the card container.
  4. Verify that the badge shows "Goal surpassed! 🎯".

Checklist

  • Self-reviewed my own diff
  • No unnecessary console.log or debug code
  • Progress bar capped at 100% maximum
  • Unit test updated for surpassed goal state

@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature type:testing GSSoC type bonus: tests (+10 pts) type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) gssoc26 GSSoC 2026 contribution labels Jul 28, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@Nareshkumawat-star

Copy link
Copy Markdown
Author

Hi @Priyanshu-byte-coder kindly review and merge it

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

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts) type:testing GSSoC type bonus: tests (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] GoalTracker progress bar exceeds 100% visually when commits surpass the goal target

1 participant