fix(ui): improve language legend dots on high DPI displays

[srinidhi-2006-bit]

Summary

Improves the rendering of language indicator dots in the Language Breakdown widget on Retina/HiDPI displays. The fixed-size dot implementation has been replaced with a DPI-friendly sizing approach to ensure the indicators remain crisp, properly sized, and visually consistent across different screen densities.

Closes #1058

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)

---

What Changed

• Updated the language indicator dot styling in src/components/LanguageBreakdown.tsx

• Replaced the fixed-size dot implementation with a DPI-friendly sizing approach using rem units

• Preserved existing layout, alignment, and accessibility attributes while improving visibility on high-DPI displays

---

How to Test

1. Run the application using npm run dev

2. Navigate to the dashboard and open the Language Breakdown widget

3. Verify the language legend indicators on different zoom levels or a HiDPI/Retina display

Expected result:

Language indicator dots appear crisp, properly sized, and aligned with their corresponding labels without causing layout regressions.

---

Screenshots / Recordings

Before | After -- | -- Small or blurry dots on HiDPI displays | Clear and properly sized dots on HiDPI displays

---

Checklist

• Linked the related issue above

• Self-reviewed my own diff

• No unnecessary console.log, debug code, or commented-out blocks

• npm run lint passes locally

• No TypeScript errors (npm run type-check)

• Added or updated tests where applicable

• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly

• Color contrast meets WCAG AA standard

• ARIA labels / roles added where needed

• Tested on mobile / responsive layout

---

Additional Context

This change only affects the visual rendering of language legend indicators and does not modify any existing functionality, data processing, or user interactions.

Summary

Improves the rendering of language indicator dots in the Language Breakdown widget on Retina/HiDPI displays. The fixed-size dot implementation has been replaced with a DPI-friendly sizing approach to ensure the indicators remain crisp, properly sized, and visually consistent across different screen densities.

Closes #1058

---

Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)

---

What Changed

• Updated the language indicator dot styling in src/components/LanguageBreakdown.tsx

• Replaced the fixed-size dot implementation with a DPI-friendly sizing approach using rem units

• Preserved existing layout, alignment, and accessibility attributes while improving visibility on high-DPI displays

---

How to Test

1. Run the application using npm run dev

2. Navigate to the dashboard and open the Language Breakdown widget

3. Verify the language legend indicators on different zoom levels or a HiDPI/Retina display

Expected result:

Language indicator dots appear crisp, properly sized, and aligned with their corresponding labels without causing layout regressions.

---

Screenshots / Recordings

Before | After -- | -- Small or blurry dots on HiDPI displays | Clear and properly sized dots on HiDPI displays

---

Checklist

• Linked the related issue above

• Self-reviewed my own diff

• No unnecessary console.log, debug code, or commented-out blocks

• npm run lint passes locally

• No TypeScript errors (npm run type-check)

• Added or updated tests where applicable

• Updated documentation / comments if behavior changed

---

Accessibility (UI changes only)

• Keyboard navigation works correctly

• Color contrast meets WCAG AA standard

• ARIA labels / roles added where needed

• Tested on mobile / responsive layout

---

Additional Context

This change only affects the visual rendering of language legend indicators and does not modify any existing functionality, data processing, or user interactions.

[github-actions]

GSSoC Label Checklist 🏷️

@Umbrella-io — 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

[srinidhi-2006-bit]

The failing Playwright checks appear to be unrelated to this change.

This PR only updates the language legend indicator styling in src/components/LanguageBreakdown.tsx to improve rendering on HiDPI/Retina displays.

The failing checks are coming from existing E2E/visual tests:

• visual-regression.spec.js (public profile screenshot)
• e2e/streak.spec.ts (duplicate aria-label="Your longest streak ever" elements in the Commit Streaks widget)

No functionality outside the Language Breakdown widget was modified in this PR.

All relevant checks for this change pass successfully:

• Build ✅
• Lint ✅
• Type Check ✅
• Test Coverage ✅

Requesting maintainer review.