Merge branch 'main' into glitch-soc/merge-upstream

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -133,7 +133,15 @@ class ComposeForm extends ImmutablePureComponent {
     }
   }
 
+  componentDidMount () {
+    this._updateFocusAndSelection({ });
+  }
+
   componentDidUpdate (prevProps) {
+    this._updateFocusAndSelection(prevProps);
+  }
+
+  _updateFocusAndSelection = (prevProps) => {
     // This statement does several things:
     // - If we're beginning a reply, and,
     //     - Replying to zero or one users, places the cursor at the end of the textbox.

app/javascript/mastodon/features/hashtag_timeline/components/column_settings.js

@@ -59,7 +59,7 @@ class ColumnSettings extends React.PureComponent {
           {this.modeLabel(mode)}
         </span>
 
-        <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content}>
+        <NonceProvider nonce={document.querySelector('meta[name=style-nonce]').content} cacheKey='tags'>
           <AsyncSelect
             isMulti
             autoFocus

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -70,8 +70,12 @@ class ColumnsArea extends ImmutablePureComponent {
     children: PropTypes.node,
   };
 
+   // Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
+   mediaQuery = 'matchMedia' in window && window.matchMedia('(max-width: 895px)');
+
   state = {
     shouldAnimate: false,
+    renderComposePanel: !(this.mediaQuery && this.mediaQuery.matches),
   }
 
   componentWillReceiveProps() {
@@ -85,6 +89,11 @@ class ColumnsArea extends ImmutablePureComponent {
       this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
     }
 
+    if (this.mediaQuery) {
+      this.mediaQuery.addEventListener('change', this.handleLayoutChange);
+      this.setState({ renderComposePanel: !this.mediaQuery.matches });
+    }
+
     this.lastIndex   = getIndex(this.context.router.history.location.pathname);
     this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
 
@@ -114,6 +123,10 @@ class ColumnsArea extends ImmutablePureComponent {
     if (!this.props.singleColumn) {
       this.node.removeEventListener('wheel', this.handleWheel);
     }
+
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', this.handleLayoutChange);
+    }
   }
 
   handleChildrenContentChange() {
@@ -123,6 +136,10 @@ class ColumnsArea extends ImmutablePureComponent {
     }
   }
 
+  handleLayoutChange = (e) => {
+    this.setState({ renderComposePanel: !e.matches });
+  }
+
   handleSwipe = (index) => {
     this.pendingIndex = index;
 
@@ -186,7 +203,7 @@ class ColumnsArea extends ImmutablePureComponent {
 
   render () {
     const { columns, children, singleColumn, isModalOpen, intl } = this.props;
-    const { shouldAnimate } = this.state;
+    const { shouldAnimate, renderComposePanel } = this.state;
 
     const columnIndex = getIndex(this.context.router.history.location.pathname);
 
@@ -205,7 +222,7 @@ class ColumnsArea extends ImmutablePureComponent {
         <div className='columns-area__panels'>
           <div className='columns-area__panels__pane columns-area__panels__pane--compositional'>
             <div className='columns-area__panels__pane__inner'>
-              <ComposePanel />
+              {renderComposePanel && <ComposePanel />}
             </div>
           </div>
 

app/javascript/styles/mastodon-light/diff.scss

@@ -707,7 +707,6 @@ html {
   .public-account-bio,
   .hero-widget__text {
     background: $account-background-color;
-    border: 1px solid lighten($ui-base-color, 8%);
   }
 
   .header {