Akshay fix overlapping center labels on Volunteer Status donut charts - #5445
Open
akv-iu wants to merge 3 commits into
Open
Akshay fix overlapping center labels on Volunteer Status donut charts#5445akv-iu wants to merge 3 commits into
akv-iu wants to merge 3 commits into
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The donut center is an absolutely positioned HTML overlay whose spacing was tuned with offsets that reserve no layout space. On the mentor chart a translateY(6px) on the heading plus margin-top: -10px on the count left -2px between their boxes; on the volunteer chart margin: 0 auto wiped the h2 bottom margin, leaving 0px. Both collapse further because the font-size scales with container width (cqw) while the offsets stayed fixed in px. Delete the offsets and let a flex column gap do the spacing on both charts. Measured heading-to-count gap goes from 0.0px / -2.0px to a uniform 6.0px, including when the comparison line is shown.
Value and percentage are already shown permanently via the externalLabelGuides canvas plugin. The default Chart.js tooltip duplicated that info and rendered its dark box directly on top of the external label on hover, reading as overlapping/garbled text. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
akv-iu
marked this pull request as ready for review
August 15, 2026 01:16
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Bug: Both donut charts in the Volunteer Status section render overlapping, unreadable text in their centers.
2544) collides with theTOTAL VOLUNTEERS*label directly above it — neither is readable.83) is painted on top of theTOTAL MENTORSlabel.Path to reproduce: Manager / Admin / Tester login → Dashboard (Under Reports)→ Total Org Summary → Global Distribution and Volunteer Status Overview → Volunteer Status
Root cause: the donut "center" is an absolutely-positioned HTML overlay (
<h2>+<p>) stacked on top of the chart canvas. Its vertical spacing was hand-tuned with offsets that reserve no layout space. Measured in a headless Chrome repro using the real CSS:MentorStatusPieChart.module.css—transform: translateY(6px)on the heading paints it 6px lower but reserves no space, whilemargin-top: -10pxpulls the count up. Net: -2px of box overlap and ~8px of painted overlap, against only 2.1px of half-leading on the count.VolunteerStatusPieChart.module.css—margin: 0 autoon the heading was written to centre the block, but the shorthand also wipes the<h2>'s bottom margin, leaving 0px of separation.max-width: 90%on a shrink-to-fit absolute parent also forces the label to wrap to two lines, so the descender row sits flush against the count.Both are amplified by
font-size: clamp(..., 8.36cqw, ...): the text scales with container width while the6px/-10pxoffsets stay fixed in px, so the tuning only holds at one exact width.Related PRS (if any):
None. This is a frontend CSS-only change; no backend PR is required.
Main changes explained:
src/components/TotalOrgSummary/VolunteerStatus/MentorStatusPieChart.module.css— removedtransform: translateY(6px)from the heading andmargin-top: -10pxfrom the count, and zeroed the margins on the heading, count and comparison line so the existing flexgap: 6pxis the only thing setting the spacing.src/components/TotalOrgSummary/VolunteerStatus/VolunteerStatusPieChart.module.css— made the center block a flex column withgap: 6px(matching the mentor chart) and zeroed the defaultpmargins so Bootstrap's margins stop fighting the gap.The magic offsets are deleted rather than re-tuned, so the spacing no longer breaks when the container-query (
cqw) font scaling changes the text size.Measured result (headless Chrome, production CSS + the app's Bootstrap build, heading-bottom to count-top):
0.0px6.0px-2.0px(overlapping)6.0pxGaps are a uniform
6.0pxon both charts, with and without the comparison line shown.How to test:
npm install, thennpm run start:localTOTAL VOLUNTEERS*and the count on separate, fully readable linesTOTAL MENTORSand the count on separate, fully readable linesScreenshots or videos of changes:
Note:
max-width: 90%vswidth: 100%inconsistency between the two headings and the un-constrained center block width are noted but left alone — happy to raise those as a separate PR if reviewers want them addressed.0.0px/-2.0pxmeasurements above come from.