Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: center align emoji for non-retina displays (#7023)

Browse Source
This commit is contained in:
Rishabh Saxena 2021-09-01 20:28:23 +05:30 committed by GitHub
parent 69be9e7e18
commit d990554290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/client/src/components/ads/EmojiReactions.tsx
View File

@ -31,10 +31,20 @@ const Bubble = styled.div<{ active?: boolean }>`
margin-right: ${(props) => `${props.theme.radii[1]}px`};
margin-top: ${(props) => `${props.theme.radii[1]}px`};
/* At times the rendered emoji has width as 16px */
& span.emoji {
min-width: 20px;
text-align: center;
/*
* center align emoji for non-retina displays
* https://bugs.chromium.org/p/chromium/issues/detail?id=551420#c15
* ref: https://stackoverflow.com/a/31578187/1543567 (mq for non-retina displays)
*/
@media not screen and (-webkit-min-device-pixel-ratio: 2),
not screen and (min--moz-device-pixel-ratio: 2),
not screen and (-o-min-device-pixel-ratio: 2/1),
not screen and (min-device-pixel-ratio: 2),
not screen and (min-resolution: 192dpi),
not screen and (min-resolution: 2dppx) {
margin-right: 3px;
}
}
`;
@ -48,6 +58,7 @@ const Count = styled.div<{ active?: boolean }>`
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-left: 2px;
`;
const ReactionsByContainer = styled.span`