Fix country flag placement in meetup list [Fixes #11861] #11862
Conversation
add extra prop to check if emoji is a flag - fixes strange placement on meetup page
specify emoji is a country flag
hursittarcan
requested review from
wackerow,
corwintines,
pettinarip,
minimalsm and
nhsz
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@corwintines this fix looks good, it fixes the issue in questions and make the list look better. |
There was a problem hiding this comment.
Hey @hursittarcan! Thanks for dropping this fix... This does fix the issue, but I would push back on altering the Emoji component here for this one-off use case.
The Emoji component spreads {...props} into the component, so instead of making a whole new boolean prop here, we can just pass lineHeight when declaring an Emoji to override this prop specifically.
I would revert everything changed in Emoji.tsx, and instead just change isFlag to lineHeight="unset" inside it's usage within MeetupList. lineHeight will be passed to the Emoji component accomplishing the same thing you're doing here, but without altering the component itself.
Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
|
Hey @wackerow 👋 |
|
Congrats, your important contribution to this open-source project has earned you a GitPOAP! Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team. GitPOAP: 2024 Ethereum.org Contributor: Head to gitpoap.io & connect your GitHub account to mint! Learn more about GitPOAPs here. |
Description
Fixes the strange placement of the country flags -> described in issue Fix country flag placement in Ethereum meetups list #11861.
I fixed this by removing the line-height from the emoji component (used to display the country flags). I wasn't sure about removing the line-height entirely because the component is being used on many different places too, soo I added an extra prop to check for flags.
Related Issue