MM-61611 Fix layout of emoji picker in mobile view (#30747)

* Stop emoji picker header from overlapping tabs

* Move emoji picker header above tabs

There was also some stuff I could remove because the header will always
be visible.

* Don't scroll the emoji picker on hover

* MM-61611 Fix emoji picker tabs being covered in mobile view

* Improve layout of emoji picker and gif picker

A lot of the emoji picker was explicitly sized before which made it
difficult to make everything responsive in mobile view. Making the emoji
picker layout into a flexbox fixed that, but due to the way that it's
nested, that was a bit tricky, and it required a couple tricks:

1. The AutoSizer doesn't work if it's placed inside a flexbox container,
   but you can fix that by putting a div with position: relative in
   between it and the flexbox parent. That was already the case, but I
   accidentally removed it while trying to sort out the seemingly
   excessive nesting.
2. Children of flexbox elements will cause the parent to expand if they
   don't have min-height/min-width set. That's because the default
   value for those is 0 outside of flexbox, but it's auto inside of one.

This breaks the layout and animation of the skin tone selector in the
emoji picker, but that has issues on master as well, so it'll be
addressed in the next commit.

* Improve and fix opening animation for skin tone selector

While this looked worse before in mobile view, it had some weirdness in
desktop as well. I ended up rewriting the way that that animation worked
so that I could position it correctly in both mobile (where it doesn't
cover the input) and desktop (where it does).

Notably, that change required:

1. Changing the skin tone selector to wait until its contents are hidden
   to unmount them so that the position and size could be calculated
   correctly.
2. Removed the flexbox from the search row and used a margin to make the
   skin tone button pretend to offset the input. That let us smoothy
   expand the selector over the input without having the input resize
   behind it.

* Update CSS for positioning emojis and headings in emoji picker

webapp/channels/src/components/emoji_picker/__snapshots__/emoji_picker.test.tsx.snap

@@ -2,10 +2,6 @@
 
 exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="emoji-picker__inner"
-    role="application"
-  >
   <div
     aria-live="assertive"
     class="sr-only"
@@ -153,6 +149,5 @@ exports[`components/emoji_picker/EmojiPicker should match snapshot 1`] = `
       Preview for grinning emoji
     </div>
   </div>
-  </div>
 </DocumentFragment>
 `;

webapp/channels/src/components/emoji_picker/components/__snapshots__/emoji_picker_header.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`components/emoji_picker/components/EmojiPickerHeader handleEmojiPickerClose, should have called props.handleEmojiPickerClose 1`] = `
 <div
-  className="emoji-picker__header modal-header"
+  className="emoji-picker__header"
 >
   <button
     className="close emoji-picker__header-close-button"
@@ -36,7 +36,7 @@ exports[`components/emoji_picker/components/EmojiPickerHeader handleEmojiPickerC
 
 exports[`components/emoji_picker/components/EmojiPickerHeader should match snapshot,  1`] = `
 <div
-  className="emoji-picker__header modal-header"
+  className="emoji-picker__header"
 >
   <button
     className="close emoji-picker__header-close-button"

webapp/channels/src/components/emoji_picker/components/emoji_picker_category_row.tsx

@@ -15,7 +15,7 @@ interface Props {
 function EmojiPickerCategoryRow({categoryName, style}: Props) {
     return (
         <div
-            className='emoji-picker-items__container'
+            className='emoji-picker__row'
             style={style}
             role='row'
         >

webapp/channels/src/components/emoji_picker/components/emoji_picker_header.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const EmojiPickerHeader = ({handleEmojiPickerClose}: Props) => {
     return (
-        <div className='emoji-picker__header modal-header'>
+        <div className='emoji-picker__header'>
             <button
                 type='button'
                 className='close emoji-picker__header-close-button'

webapp/channels/src/components/emoji_picker/components/emoji_picker_skin.tsx

@@ -80,6 +80,7 @@ export type Props = {
 
 type State = {
     pickerExtended: boolean;
+    pickerMounted: boolean;
 }
 
 export class EmojiPickerSkin extends React.PureComponent<Props, State> {
@@ -88,6 +89,7 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
 
         this.state = {
             pickerExtended: false,
+            pickerMounted: false,
         };
     }
 
@@ -109,7 +111,16 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
     };
 
     showSkinTonePicker = () => {
-        this.setState({pickerExtended: true});
+        this.setState({
+            pickerExtended: true,
+            pickerMounted: true,
+        });
+    };
+
+    handleSkinToneHidden = () => {
+        this.setState({
+            pickerMounted: false,
+        });
     };
 
     skinTonePickerButton() {
@@ -194,16 +205,17 @@ export class EmojiPickerSkin extends React.PureComponent<Props, State> {
         return (
             <CSSTransition
                 in={this.state.pickerExtended}
+                onExited={this.handleSkinToneHidden}
                 classNames='skin-tones-animation'
                 timeout={200}
             >
-                <div className={classNames('skin-tones', {'skin-tones--active': this.state.pickerExtended})}>
+                <div className={classNames('skin-tones', {'skin-tones--active': this.state.pickerMounted})}>
                     <div
-                        className={classNames('skin-tones__content', {'skin-tones__content__single': !this.state.pickerExtended}, {'skin-tones__close': this.state.pickerExtended})}
+                        className={classNames('skin-tones__content', {'skin-tones__content__single': !this.state.pickerMounted}, {'skin-tones__close': this.state.pickerMounted})}
                         aria-orientation='horizontal'
                     >
                         {this.skinTonePickerButton()}
-                        {this.state.pickerExtended &&
+                        {this.state.pickerMounted &&
                         <>
                             <div className='skin-tones__close-text'>
                                 <FormattedMessage

webapp/channels/src/components/emoji_picker/emoji_picker.tsx

@@ -147,14 +147,6 @@ const EmojiPicker = ({
         infiniteLoaderRef?.current?._listRef?.scrollToItem(0, 'start');
     }, [filter]);
 
-    // scroll as little as possible on cursor navigation
-    useEffect(() => {
-        if (cursor.emojiId) {
-            // eslint-disable-next-line no-underscore-dangle
-            infiniteLoaderRef?.current?._listRef?.scrollToItem(cursor.rowIndex, 'auto');
-        }
-    }, [cursor.rowIndex]);
-
     const focusOnSearchInput = useCallback(() => {
         searchInputRef.current?.focus();
     }, []);
@@ -209,6 +201,9 @@ const EmojiPicker = ({
             emojiId: '',
             emoji: undefined,
         });
+
+        // eslint-disable-next-line no-underscore-dangle
+        infiniteLoaderRef.current?._listRef?.scrollTo(0);
     }, []);
 
     const onAddCustomEmojiClickInner = useCallback(() => {
@@ -348,6 +343,9 @@ const EmojiPicker = ({
             emojiId: newCursor.emojiId,
             emoji: newCursorEmoji,
         });
+
+        // eslint-disable-next-line no-underscore-dangle
+        infiniteLoaderRef?.current?._listRef?.scrollToItem(newCursor.rowIndex, 'auto');
     };
 
     const handleEnterOnEmoji = useCallback(() => {
@@ -378,10 +376,7 @@ const EmojiPicker = ({
     const areSearchResultsEmpty = filter.length !== 0 && categoryOrEmojisRows.length === 1 && categoryOrEmojisRows?.[0]?.items?.[0]?.categoryName === SEARCH_RESULTS;
 
     return (
-        <div
+        <>
-            className='emoji-picker__inner'
-            role='application'
-        >
             <div
                 aria-live='assertive'
                 className='sr-only'
@@ -456,7 +451,7 @@ const EmojiPicker = ({
                     onClick={onAddCustomEmojiClickInner}
                 />
             </div>
-        </div>
+        </>
     );
 };
 

webapp/channels/src/components/emoji_picker/emoji_picker_tabs.tsx

@@ -42,6 +42,7 @@ export default function EmojiPickerTabs(props: Props) {
                 aria-label={activeKey === 1 ? intl.formatMessage({id: 'emoji_gif_picker.dialog.emojis', defaultMessage: 'Emoji Picker'}) : intl.formatMessage({id: 'emoji_gif_picker.dialog.gifs', defaultMessage: 'GIF Picker'})}
                 aria-modal='true'
             >
+                <EmojiPickerHeader handleEmojiPickerClose={props.onEmojiClose}/>
                 <Tabs
                     id='emoji-picker-tabs'
                     defaultActiveKey={1}
@@ -51,7 +52,6 @@ export default function EmojiPickerTabs(props: Props) {
                     activeKey={activeKey}
                     onSelect={(activeKey) => setActiveKey(activeKey)}
                 >
-                    <EmojiPickerHeader handleEmojiPickerClose={props.onEmojiClose}/>
                     <Tab
                         eventKey={1}
                         title={

webapp/channels/src/components/gif_picker/components/gif_picker_search.tsx

@@ -44,7 +44,7 @@ function GifPickerSearch(props: Props) {
 
     return (
         <div className='emoji-picker__search-container'>
-            <div className='emoji-picker__text-container'>
+            <div className='emoji-picker__text-container gif-picker__text-container'>
                 <span className='icon-magnify icon emoji-picker__search-icon'/>
                 <input
                     id='emojiPickerSearch'

webapp/channels/src/components/gif_picker/gif_picker.tsx

@@ -34,7 +34,7 @@ const GifPicker = (props: Props) => {
     }, [props.getRootPickerNode]);
 
     return (
-        <div>
+        <>
             <GifPickerSearch
                 value={props.filter}
                 onChange={props.handleFilterChange}
@@ -44,7 +44,7 @@ const GifPicker = (props: Props) => {
                 filter={props.filter}
                 onClick={handleItemClick}
             />
-        </div>
+        </>
     );
 };
 

webapp/channels/src/sass/components/_emoji-picker-tabs.scss

@@ -70,3 +70,35 @@
 .custom-emoji-tab__icon {
     margin-right: 7px;
 }
+
+#emoji-picker-tabs {
+    display: flex;
+
+    // These prevent a flex element from overflowing its parent
+    min-width: 0;
+    min-height: 0;
+
+    flex: 1;
+    flex-direction: column;
+
+    .tab-content {
+        display: flex;
+
+        // These prevent a flex element from overflowing its parent
+        min-width: 0;
+        min-height: 0;
+
+        flex: 1;
+
+        .tab-pane {
+            display: flex;
+
+            // These prevent a flex element from overflowing its parent
+            min-width: 0;
+            min-height: 0;
+
+            flex: 1;
+            flex-direction: column;
+        }
+    }
+}

webapp/channels/src/sass/components/_emoticons.scss

@@ -100,16 +100,6 @@
 
     @include mixins.clearfix;
 
-    .emoji-picker__header {
-        background: var(--sidebar-header-bg);
-    }
-
-    &.emoji-picker--single {
-        .emoji-picker__header {
-            position: relative;
-        }
-    }
-
     .browser--ie & {
         width: 325px;
     }
@@ -135,11 +125,11 @@
             }
 
             a {
-                height: 40px;
                 padding: 7px 12px;
                 border: none !important;
                 border-bottom: 2px solid transparent !important;
                 margin-right: 5px;
+                margin-bottom: 0;
                 margin-left: 5px;
                 background: transparent;
                 outline: none;
@@ -153,8 +143,6 @@
 
             &.active {
                 a {
-                    height: 34px;
-                    padding-top: 9px;
                     border-radius: 0;
                     margin-right: 5px;
                     margin-left: 5px;
@@ -226,15 +214,12 @@
     }
 }
 
-.emoji-picker__header,
+.emoji-picker__header {
-.modal-body .emoji-picker .emoji-picker__header {
-    position: absolute;
     top: 0;
     display: none; // only visible < 480px width screen
     width: 100%;
     padding: 13px 10px 13px 15px;
-    border: 1px solid variables.$light-gray;
+    background: var(--sidebar-header-bg);
-    background: variables.$primary-color;
     color: var(--sidebar-header-text-color);
 
     .emoji-picker__header-title {
@@ -255,23 +240,16 @@
     }
 }
 
-.modal-body .emoji-picker .emoji-picker__header {
-    .emoji-picker__header-title {
-        margin-top: 0;
-    }
-}
-
 .emoji-picker__search-container {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-color: transparent !important;
     margin: 12px;
 
     .skin-tones-animation {
         &-enter {
-            transform: translateX(100%);
+            transform: translateX(calc(100% - 32px));
         }
 
         &-enter-active {
@@ -279,30 +257,34 @@
             transition: transform 200ms ease-in-out;
         }
 
+        &-enter-done {
+            transform: translateX(0%);
+        }
+
         &-exit {
-            position: absolute;
-            width: 100%;
             transform: translateX(0%);
         }
 
         &-exit-active {
-            transform: translateX(90%);
+            transform: translateX(calc(100% - 32px));
             transition: transform 200ms ease-in-out;
         }
     }
 
     .skin-tones {
+        position: absolute;
         z-index: 10;
+        right: 0;
+        bottom: 0;
         display: flex;
         height: 100%;
         align-items: center;
         background: var(--center-channel-bg);
-        margin-inline-start: 8px;
 
         &--active {
             position: absolute;
-            width: 100%;
+            width: fit-content;
-            justify-content: space-around;
+            justify-content: flex-start;
 
             .skin-tones__close,
             .skin-tones__icons {
@@ -351,13 +333,15 @@
     }
 
     .emoji-picker__text-container {
-        position: relative;
-        z-index: 5;
-        width: 100%;
         height: 32px;
+        flex: 1;
         border: 1px solid rgba(var(--center-channel-color-rgb), 0.24);
         border-radius: 4px;
 
+        &:not(.gif-picker__text-container) {
+            margin-right: 40px;
+        }
+
         &:focus-within {
             border: 2px solid functions.v(button-bg);
 
@@ -459,8 +443,8 @@
     }
 
     .gif-attribution {
-        padding: 5px 0 5px 5px;
         margin-inline-start: 8px;
+        padding-inline-start: 5px;
 
         & > img {
             width: 100%;
@@ -476,14 +460,13 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
 
 .emoji-picker__items {
     position: relative;
-    width: 100%;
-    height: 270px;
-    padding: 4px 0 4px 12px;
     border-top-width: 1px;
     border-top-style: solid;
     -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     overflow-y: auto;
+    padding-block: 4px;
+    padding-inline: 0px;
 
     &:has(.no-results__wrapper) {
         display: flex;
@@ -507,11 +490,11 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
 
     .emoji-picker__category-header {
         position: relative;
-        padding-top: 3px;
+        align-content: center;
-        margin-top: 6px;
         color: rgba(var(--center-channel-color-rgb), 0.48);
         font-size: 12px;
         font-weight: bold;
+        line-height: normal;
         text-transform: uppercase;
     }
 
@@ -531,6 +514,8 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
 .emoji-picker__row {
     display: flex;
     justify-content: flex-start;
+    padding-inline-end: 4px;
+    padding-inline-start: 12px;
 }
 
 .emoji-picker__item {
@@ -578,10 +563,6 @@ $emoji-footer-height:  $emoji-footer-border-width + $emoji-half-height + $emoji-
         background-color: rgba(var(--center-channel-color-rgb), 0.32);
     }
 
-    > div {
-        text-align: center;
-    }
-
     img {
         position: relative;
         transition: transform 0.2s ease-in-out;

webapp/channels/src/sass/responsive/_mobile.scss

@@ -378,41 +378,19 @@
     }
 
     .emoji-picker {
-        // !important is used to overide inline styles
+        display: flex;
-        // used on larger screens
+        width: 100vw;
-        top: 0 !important;
+        height: 100vh;
-        right: auto !important;
+        flex-direction: column;
-        bottom: auto !important;
-        left: 0 !important;
-        width: 100%;
-        height: 100%;
         border-radius: 0;
-
+        margin-right: 0;
-        >ul {
-            margin-top: 66px;
-        }
 
         .search-grid-container {
             height: calc(100vh - 170px);
         }
     }
 
-    .emoji-picker__inner {
+    .emoji-picker__header {
-        display: flex;
-        height: calc(100vh - 100px);
-        flex-direction: column;
-
-        .emoji-picker--single & {
-            height: calc(100vh - 55px);
-        }
-
-        >* {
-            flex-grow: 0;
-        }
-    }
-
-    .emoji-picker__header,
-    .modal-body .emoji-picker .emoji-picker__header {
         display: block;
     }
 
@@ -423,19 +401,10 @@
         }
     }
 
-    .emoji-picker__search-container {
-        height: 40px;
-
-        .emoji-picker__text-container {
-            width: 95%;
-        }
-    }
-
     .emoji-picker__items {
-        flex-grow: 1;
+        flex: 1;
 
         .emoji-picker__category-header {
-            padding-top: 8px;
             font-size: 14px;
         }
     }
@@ -444,20 +413,7 @@
         width: calc(100% / 15);
         height: auto;
         padding: 0;
-        padding-top: calc(100% / 15);
+        margin-inline: calc(100% / 45);
-        margin: calc(100% / 45);
-
-        > div {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            display: flex;
-            width: 30px;
-            height: 30px;
-            align-items: center;
-            justify-content: center;
-            transform: translate(-50%, -50%);
-        }
     }
 
     .emoji-picker__preview {
@@ -1815,7 +1771,6 @@
 
     .emoji-picker__item {
         width: calc(100% / #{variables.$emoji-per-row});
-        padding-top: calc(100% / #{variables.$emoji-per-row});
         margin: 0;
     }
 

webapp/channels/src/sass/utils/_variables.scss

@@ -24,7 +24,7 @@ $announcement-bar-height: 40px;
 $backstage-bar-height: 43px;
 
 // Random variables
-$emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in emoji_picker.jsx
+$emoji-per-row: 9; // needs to match variable `EMOJI_PER_ROW` in components/emoji_picker/constants/index.ts
 
 // Transition timing defaults
 $transition-quick: 0.12s;

webapp/channels/src/utils/utils.tsx

@@ -323,7 +323,6 @@ export function applyTheme(theme: Theme) {
         changeCss('.app__body .channel-header .pinned-posts-button svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.75));
         changeCss('.app__body .channel-header .channel-header_plugin-dropdown svg', 'fill:' + changeOpacity(theme.centerChannelColor, 0.75));
         changeCss('.app__body .file-preview, .app__body .post-image__details, .app__body .markdown__table th, .app__body .markdown__table td, .app__body .webhooks__container, .app__body .dropdown-menu', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
-        changeCss('.emoji-picker .emoji-picker__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25));
         changeCss('.app__body .btn.btn-transparent', 'color:' + changeOpacity(theme.centerChannelColor, 0.7));
         changeCss('.app__body .popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25));
@@ -366,7 +365,7 @@ export function applyTheme(theme: Theme) {
         changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker__search-icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.4));
-        changeCss('.app__body .emoji-picker__preview, .app__body .emoji-picker__items, .app__body .emoji-picker__search-container', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker__preview, .app__body .emoji-picker__items', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.emoji-picker__category .fa:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .emoji-picker__item-wrapper:hover', 'background-color:' + changeOpacity(theme.centerChannelColor, 0.8));
         changeCss('.app__body .icon__postcontent_picker:hover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8));