From 883ffb0a743d2e732440febd034df4e0852a0d06 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Apr 2022 15:46:26 -0500
Subject: [PATCH 1/3] TimelineQueueButtonHeader: add whitespace-nowrap

---
 app/soapbox/components/timeline_queue_button_header.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/timeline_queue_button_header.js b/app/soapbox/components/timeline_queue_button_header.js
index 99f764e22..29a8e787a 100644
--- a/app/soapbox/components/timeline_queue_button_header.js
+++ b/app/soapbox/components/timeline_queue_button_header.js
@@ -103,7 +103,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
 
     return (
       <div className={classes}>
-        <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer' onClick={this.handleClick}>
+        <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={this.handleClick}>
           <Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
 
           {(count > 0) && (

From eaf42370b95608fc385db146e42e2a620f67b409 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Apr 2022 15:49:36 -0500
Subject: [PATCH 2/3] ComposeForm: make all buttons acessible on mobile
 (hotfix)

---
 app/soapbox/features/compose/components/compose_form.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 675abe4bf..2f054836f 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -364,7 +364,7 @@ class ComposeForm extends ImmutablePureComponent {
         <QuotedStatusContainer />
 
         <div
-          className={classNames('flex items-center justify-between', {
+          className={classNames('flex flex-wrap items-center justify-between', {
             'hidden': condensed,
           })}
         >
@@ -378,7 +378,7 @@ class ComposeForm extends ImmutablePureComponent {
             <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           </div>
 
-          <div className='flex items-center space-x-4 ml-4'>
+          <div className='flex items-center space-x-4 ml-auto'>
             {maxTootChars && (
               <div className='flex items-center space-x-1'>
                 <TextCharacterCounter max={maxTootChars} text={text} />

From 9596ed072b90d3e29af749a65fa662989c3025e9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Apr 2022 17:37:38 -0500
Subject: [PATCH 3/3] EmojiButtonWrapper: improve touch behavior

---
 app/soapbox/components/emoji-button-wrapper.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 32159b329..1dad15dc7 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -44,13 +44,19 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
   if (!status) return null;
 
   const handleMouseEnter = () => {
-    setVisible(true);
+    if (!isUserTouching()) {
+      setVisible(true);
+    }
   };
 
   const handleMouseLeave = () => {
     setVisible(false);
   };
 
+  const handleUnfocus = () => {
+    setVisible(false);
+  };
+
   const handleReact = (emoji: string): void => {
     if (ownAccount) {
       dispatch(simpleEmojiReact(status, emoji));
@@ -77,6 +83,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
       handleReact(meEmojiReact);
     }
 
+    e.preventDefault();
     e.stopPropagation();
   };
 
@@ -106,6 +113,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
     <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
       {React.cloneElement(children, {
         onClick: handleClick,
+        onBlur: handleUnfocus,
         ref,
       })}