Add forceSingleColumn prop to <UI /> (#10807)

* Move TabsBar rendering logic from CSS to the ColumnsArea component

* Add forceSingleColumn mode

* Add unread notifications counter to tabs bar

* Add toggle to control `forceSingleColumn`

* Increase paddings in mobile layout responsively at large sizes

app/javascript/mastodon/features/compose/index.js

@@ -106,12 +106,12 @@ class Compose extends React.PureComponent {
         <div className='drawer__pager'>
           {!isSearchPage && <div className='drawer__inner' onFocus={this.onFocus}>
             <NavigationContainer onClose={this.onBlur} />
+
             <ComposeFormContainer />
-            {multiColumn && (
-              <div className='drawer__inner__mastodon'>
-                <img alt='' draggable='false' src={mascot || elephantUIPlane} />
-              </div>
-            )}
+
+            <div className='drawer__inner__mastodon'>
+              <img alt='' draggable='false' src={mascot || elephantUIPlane} />
+            </div>
           </div>}
 
           <Motion defaultStyle={{ x: isSearchPage ? 0 : -100 }} style={{ x: spring(showSearch || isSearchPage ? 0 : -100, { stiffness: 210, damping: 20 }) }}>