kosmos/mastodon
kosmos/mastodon
8
0
Fork 0
Code Pull Requests Activity

Fix emoji picker placement on limited-height viewports (#29651)

Browse Source
This commit is contained in:
Claire 2024-03-20 12:07:02 +01:00 committed by GitHub
parent e36e7ea243
commit 94f7ae192b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx
View File

@ -330,6 +330,7 @@ class EmojiPickerDropdown extends PureComponent {
state = {
active: false,
loading: false,
placement: 'bottom',
};
setRef = (c) => {
@ -381,10 +382,14 @@ class EmojiPickerDropdown extends PureComponent {
return this.target;
};
handleOverlayEnter = (state) => {
this.setState({ placement: state.placement });
};
render () {
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
const title = intl.formatMessage(messages.emoji);
const { active, loading } = this.state;
const { active, loading, placement } = this.state;
return (
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
@ -397,7 +402,7 @@ class EmojiPickerDropdown extends PureComponent {
inverted
/>
<Overlay show={active} placement={'bottom'} target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
<Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
{({ props, placement })=> (
<div {...props} style={{ ...props.style }}>
<div className={`dropdown-animation ${placement}`}>