Fix position of gem count in stats graph

[yykamei]

On smaller devices, the gem count value could overlap the gem name. This overlap prevented users from clicking the link associated with the gem name.

Using the left property for positioning the count ensures that the gem name remains clickable, resolving the usability issue on small screens.

Before	After

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 94.34%. Comparing base (c1ac815) to head (8eb9100).
Report is 34 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5646      +/-   ##
==========================================
- Coverage   97.12%   94.34%   -2.78%     
==========================================
  Files         454      454              
  Lines        9459     9518      +59     
==========================================
- Hits         9187     8980     -207     
- Misses        272      538     +266     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[colby-swandale]

Thanks for submitting a PR to fix this! Would you be able to set this rule to only be applied to mobile devices, or whatever screen width makes sense (see below)? we should leave the original behaviour for laptops/desktops.

[yykamei]

Certainly! I have reverted the previous changes and applied the modifications detailed below. With these adjustments, left: 12px will be applied to devices with a screen width of 709px or less.

diff --git a/app/assets/stylesheets/modules/stats.css b/app/assets/stylesheets/modules/stats.css
index c9f416900..8f6e8a85a 100644
--- a/app/assets/stylesheets/modules/stats.css
+++ b/app/assets/stylesheets/modules/stats.css
@@ -197,7 +197,9 @@
       font-size: 13px; } }
   @media (max-width: 709px) {
     .stats__graph__gem__count {
-      top: 7px; } }
+      top: 7px;
+      right: auto;
+      left: 12px; } }
   @media (min-width: 710px) {
     .stats__graph__gem__count {
       top: 5px;

However, I encountered an issue where an overlap occurs even on larger screens if the meter element (stats__graph__gem__meter) is short. I've attached a video demonstrating this behavior.

Screen.Recording.2025-05-07.at.22.46.37.mov

Given this experience, I'd suggest applying left: 12px for this element across all screen sizes, rather than limiting it to specific media queries. This might be a more robust solution to the overlap.

[simi]

@yykamei what kind of screen that it? It seems bellow 300px width. 🤔

[yykamei]

@simi Thank you for your reply. I'm experiencing this issue with my Google Pixel 7a. According to What is my screen size?, the width of my phone seems to be 411px.

screen-20250506-160129.mp4