feat: better action bar button style for mobile

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -301,51 +301,52 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <IconButton
-          className='status__action-bar-button'
-          title={replyTitle}
-          icon={replyIcon}
-          onClick={this.handleReplyClick}
-          counter={status.get('replies_count')}
-          obfuscateCount={showReplyCount}
-        />
-        <IconButton
-          className={classNames('status__action-bar-button', { reblogPrivate })}
-          disabled={!publicStatus && !reblogPrivate}
-          active={status.get('reblogged')}
-          title={reblogTitle}
-          icon={reblogIcon}
-          onClick={this.handleReblogClick}
-          counter={status.get('reblogs_count')}
-          obfuscateCount={showReplyCount}
-        />
-        <IconButton
-          className='status__action-bar-button star-icon'
-          animate active={status.get('favourited')}
-          title={intl.formatMessage(messages.favourite)}
-          icon='heart' onClick={this.handleFavouriteClick}
-          counter={status.get('favourites_count')}
-          obfuscateCount={showReplyCount}
-        />
-        {shareButton}
-        <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
-
-        {filterButton}
-
-        <div className='status__action-bar-dropdown'>
-          <DropdownMenuContainer
-            scrollKey={scrollKey}
-            disabled={anonymousAccess}
-            status={status}
-            items={menu}
-            icon='ellipsis-h'
-            size={18}
-            direction='right'
-            ariaLabel={intl.formatMessage(messages.more)}
+        <div className='status__action-bar__buttons'>
+          <IconButton
+            className='status__action-bar-button'
+            title={replyTitle}
+            icon={replyIcon}
+            onClick={this.handleReplyClick}
+            counter={status.get('replies_count')}
+            obfuscateCount={showReplyCount}
           />
+          <IconButton
+            className={classNames('status__action-bar-button', { reblogPrivate })}
+            disabled={!publicStatus && !reblogPrivate}
+            active={status.get('reblogged')}
+            title={reblogTitle}
+            icon={reblogIcon}
+            onClick={this.handleReblogClick}
+            counter={status.get('reblogs_count')}
+            obfuscateCount={showReplyCount}
+          />
+          <IconButton
+            className='status__action-bar-button star-icon'
+            animate active={status.get('favourited')}
+            title={intl.formatMessage(messages.favourite)}
+            icon='heart' onClick={this.handleFavouriteClick}
+            counter={status.get('favourites_count')}
+            obfuscateCount={showReplyCount}
+          />
+          {shareButton}
+          <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
+  
+          {filterButton}
+  
+          <div className='status__action-bar-dropdown'>
+            <DropdownMenuContainer
+              scrollKey={scrollKey}
+              disabled={anonymousAccess}
+              status={status}
+              items={menu}
+              icon='ellipsis-h'
+              size={18}
+              direction='right'
+              ariaLabel={intl.formatMessage(messages.more)}
+            />
+          </div>
         </div>
 
-        <div className='status__action-bar-spacer' />
         <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'>
           <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
         </a>

app/javascript/flavours/glitch/styles/components/status.scss

@@ -523,13 +523,13 @@
   align-items: center;
   display: flex;
   margin-top: 8px;
-}
-
-.status__action-bar-button {
-  margin-right: 18px;
+  justify-content: space-between;
 
-  &.icon-button--with-counter {
-    margin-right: 14px;
+  &__buttons {
+    display: flex;
+    justify-content: space-between;
+    max-width: 250px;
+    flex-grow: 1;
   }
 }