diff --git a/.gitignore b/.gitignore index c19c467dfabb..112595c0c457 100644 --- a/.gitignore +++ b/.gitignore @@ -87,3 +87,5 @@ go/keybase_netbsd go/keybase_openbsd .cursor +.claude +CLAUDE.md diff --git a/shared/chat/conversation/messages/react-button.tsx b/shared/chat/conversation/messages/react-button.tsx index 4d9e009c7c5f..2486bd7a1129 100644 --- a/shared/chat/conversation/messages/react-button.tsx +++ b/shared/chat/conversation/messages/react-button.tsx @@ -109,14 +109,15 @@ const ReactButtonContainer = React.memo(function ReactButtonContainer(p: OwnProp const markdownOverride: StyleOverride = Kb.Styles.isMobile ? { customEmoji: { - height: 24, - transform: [{translateY: C.isAndroid ? 0 : 3.5}], - width: 24, + height: 20, + transform: [{translateY: 4}], + width: 20, }, emoji: { - lineHeight: C.isAndroid ? 26 : 28.5, + fontSize: 15, }, emojiSize: {size: 24}, + paragraph: C.isAndroid ? ({height: 28, textAlignVertical: 'center'} as StyleOverride['paragraph']) : {}, } : { customEmoji: {height: 18, width: 18}, diff --git a/shared/common-adapters/emoji/native-emoji.native.tsx b/shared/common-adapters/emoji/native-emoji.native.tsx index 0f57e6e46ca3..2e8f6ded907f 100644 --- a/shared/common-adapters/emoji/native-emoji.native.tsx +++ b/shared/common-adapters/emoji/native-emoji.native.tsx @@ -6,20 +6,22 @@ import Text from '../text' import type {Props} from './native-emoji' -const familyOverride = isAndroid ? {fontFamily: ''} : {} - const sizes = [16, 18, 22, 24, 26, 28, 32, 36] as const const sizeStyle = new Map<(typeof sizes)[number], Styles.StylesCrossPlatform>( - sizes.map(size => [size, {fontSize: size - 2, lineHeight: undefined, ...familyOverride}]) + sizes.map(size => [size, {fontSize: size - 2, lineHeight: undefined}]) ) +// Android fails to paint emoji glyphs in mixed-content Text nodes when the +// variant selector (VS16 / U+FE0F) is appended to codepoints that already +// have Emoji_Presentation. iOS and desktop handle it fine. +const emojiVariantSuffix = isAndroid ? '' : '\ufe0f' + const EmojiWrapper = React.memo(function EmojiWrapper(props: Props) { const {emojiName, size} = props - const emojiVariantSuffix = '\ufe0f' // see http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/ return ( {emojiIndexByName[emojiName] ? emojiIndexByName[emojiName] + emojiVariantSuffix : emojiName}