Merge pull request #772 from missive/fix/width-on-hover

Fix picker width changing when hovering emojis
missive · Jan 12, 2023 · b3544a6 · b3544a6
2 parents 465eec0 + 9302f95
commit b3544a6
Showing 1 changed file with 8 additions and 3 deletions.
diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -1099,10 +1099,17 @@ export default class Picker extends Component {
   }
 
   render() {
+    const lineWidth = this.props.perLine * this.props.emojiButtonSize
+
     return (
       <section
         id="root"
         class="flex flex-column"
+        style={{
+          width: this.props.dynamicWidth
+            ? '100%'
+            : `calc(${lineWidth}px + (var(--padding) + var(--sidebar-width)))`,
+        }}
         data-emoji-set={this.props.set}
         data-theme={this.state.theme}
         data-menu={this.state.showSkins ? '' : undefined}
@@ -1116,9 +1123,7 @@ export default class Picker extends Component {
         <div ref={this.refs.scroll} class="scroll flex-grow padding-lr">
           <div
             style={{
-              width: this.props.dynamicWidth
-                ? '100%'
-                : this.props.perLine * this.props.emojiButtonSize,
+              width: this.props.dynamicWidth ? '100%' : lineWidth,
               height: '100%',
             }}
           >