fix: scale colorbar tick font size#688
Open
dhanush-kannan-dk wants to merge 3 commits into
Open
Conversation
Contributor
Cloudflare Pages preview
|
conradarcturus
approved these changes
Jun 26, 2026
conradarcturus
left a comment
conradarcturus
left a comment
Collaborator
There was a problem hiding this comment.
Great :) Changes look good and it shows that you have an eye for detail. I have some stylistic notes but you'll welcome to ignore them if you prefer your choices.
| ) | ||
| : undefined; | ||
|
|
||
| if (minValue === undefined || maxValue === undefined) { |
Collaborator
There was a problem hiding this comment.
Thanks for fixing the react problem by moving this after the hooks.
Comment on lines
+40
to
+41
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const [containerWidth, setContainerWidth] = useState(800); |
Collaborator
There was a problem hiding this comment.
nit: Call this colorBarRef and colorBarWidth -- container is too generic.
| const formatter = new Intl.NumberFormat(undefined, { | ||
| notation: 'compact', | ||
| compactDisplay: 'long', // or 'long' for “thousand”, “million” | ||
| compactDisplay: widthPx < 700 ? 'short' : 'long', |
| justifyContent: 'center', | ||
| }; | ||
| return ( | ||
| <div style={containerStyle}> |
Collaborator
There was a problem hiding this comment.
Instead of these padding & icon breaks, since padding and icon uses relative units (em) -- why not just change the container's font size?
Your approach works but it requires passing in a lot of styles when CSS already is configured to use relative sizing.
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
2 participants
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.
Fixes #679
Summary: The colorbar below the map had a fixed font size and number format
regardless of container width, causing tick labels to overlap on narrow
viewports. The zoom control buttons were also oversized on small screens.
Changes
width (0.5em at ≤450px → 1em at ≥900px), preventing overlap when the
map is in a narrow layout
wide, replacing long labels like "190 thousand" with "190K"
(16px/0.25em at <500px → 20px/0.35em at <700px → 24px/0.5em at ≥700px)
ResizeObserveradded toColorBarto track its own pixel widthResizeObserveradded toEntityMapouter container; width passeddown to
ZoomControlsas a propColorBarwhereuseMemowas called after an early
return nullInteractiveEntityTable.test.tsxthathardcoded
'1,234,567'— replaced withtoLocaleString()so it passeson machines using non-Western number formatting (e.g. Indian lakh system)
Out of scope/Future work: Could further reduce the number of ticks shown at
very narrow widths if font scaling alone is not sufficient.
Test Plan and Screenshots
How to test the changes in this PR: Run
npm run dev, navigate to a mapview, enable Color By (e.g. Population), then resize the browser window
narrower to observe font size and number format adapting. Use DevTools
device toolbar set to iPhone SE (375px) to verify zoom button sizing.
Testing
npm run lintnpm run buildnpm run testnpm run dev-- tried out the website directly