fix: improved rank change indicator visibility and added hover details (#153)

[SandraHarshitha]

Overview

This PR resolves issue #153 by drastically reducing visual noise on the leaderboard columns and providing highly contextual, responsive hover details for student progress tracking.

---

Tasks Completed

• Refactored createRankChangeElement conditional loops inside render.js to clear out neutral marker noise.
• Integrated dynamic string literals to inject real-time structural metrics into HTML5 data attributes.
• Appended framework-free, component-isolated CSS tooltip layout configurations to main.css.
• Localized layout rules with clean, responsive breakpoints targeting small screen displays.

---

Detailed Breakdown of Changes

1. JavaScript Logic Updates (js/leaderboard/render.js)

• Wiped Out [=] Clutter: Added a defensive check at the top of createRankChangeElement that returns null immediately if rankChange === "=". This prevents the creation of empty or neutral DOM blocks across table rows.
• Dynamic String Construction: Re-engineered the template blocks for active indicators. It now isolates the absolute mathematical offset of the string (e.g., stripping the leading + or -) and dynamically generates readable strings like:
  • ↑3 $\rightarrow$ Rank increased by 3 places today
  • ↓2 $\rightarrow$ Rank dropped by 2 places today
  • [NEW] $\rightarrow$ Newly added to the leaderboard

2. CSS Architecture Additions (frontend/styles/main.css)

• Native Attribute Anchoring: Created a pseudo-element rule configuration ([data-tooltip]::before) that targets your updated rank-change spans.
• Terminal Preservation: Utilized pre-existing CSS variables (var(--bg-raised), var(--green), and var(--text)) so that popup containers automatically adhere to the project's retro CRT layout system without manual color hardcoding.
• Performance Optimization: Handled hover transitions smoothly utilizing high-performance rendering properties (opacity and pointer-events: none), completely avoiding bulky scroll or mouse listeners inside the JavaScript layer.
• Mobile View Adaptation: Added an implicit media-query fallback block (@media (max-width: 480px)) that switches tooltip projection from bottom: 140% to top: 140% on tight mobile layouts to securely prevent display clipping off the edge of the device screen.

---

Verification Testing

• Verified locally that rows featuring static rank entries remain entirely clear of symbols.
• Tested hover micro-interactions across modern viewports; tooltip blocks render precisely, scale correctly, and accurately evaluate target numeric string arrays.

[github-actions]

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

Formatting and Branching

• Please confirm you have formatted your code locally using npx prettier --write ., or you can simply comment /format on this PR to have our bot do it for you!
• Ensure this PR is made from a feature/* branch and not main.

Note: This project is currently maintained by a solo maintainer, so reviews and responses may sometimes take a little time. Thanks for your patience.

[jagdish-15]

/format

[github-actions]

I have successfully run Prettier and pushed the formatting fixes to this PR.

Note for Contributors: Because this commit was pushed by a bot, GitHub will not automatically re-run the CI checks. To trigger them to pass, you must either:

• Push an empty commit locally (git commit --allow-empty -m "Trigger builds" and push)
• Close and immediately reopen this Pull Request.