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

Conflicts:
- `config/webpack/configuration.js`:
  Upstream updated the `js-yaml` dependency, which changed how to call it.
  Those changes conflicted because that code is pretty different in glitch-soc
  which has to deal with its more complex theming system.
  Proceeded to the same compatibility changes in glitch-soc's code.
- `package.json` and `yarn.lock`:
  Not really a conflict, just glitch-soc-specific dependencies textually too
  close to some dependencies updated upstream.

app/javascript/styles/mastodon/components.scss

@@ -154,6 +154,11 @@
     display: block;
     width: 100%;
   }
+
+  .layout-multiple-columns &.button--with-bell {
+    font-size: 12px;
+    padding: 0 8px;
+  }
 }
 
 .column__wrapper {
@@ -2879,6 +2884,7 @@ a.account__display-name {
     flex: 0 0 auto;
     padding: 10px;
     padding-top: 20px;
+    z-index: 1;
 
     ul {
       margin-bottom: 10px;
@@ -7194,21 +7200,6 @@ noscript {
   .audio-player {
     border-radius: 0;
   }
-
-  @media screen and (max-width: 415px) {
-    width: 210px;
-    bottom: 10px;
-    right: 10px;
-
-    &__footer {
-      display: none;
-    }
-
-    .video-player,
-    .audio-player {
-      border-radius: 0 0 4px 4px;
-    }
-  }
 }
 
 .picture-in-picture-placeholder {

app/javascript/styles/mastodon/containers.scss

@@ -444,6 +444,10 @@
       }
     }
 
+    .logo-button {
+      padding: 3px 15px;
+    }
+
     &__image {
       border-radius: 4px 4px 0 0;
       overflow: hidden;

app/javascript/styles/mastodon/rtl.scss

@@ -170,6 +170,11 @@ body.rtl {
     right: 42px;
   }
 
+  .account__header__tabs__buttons > .icon-button {
+    margin-right: 0;
+    margin-left: 8px;
+  }
+
   .account__avatar-overlay-overlay {
     right: auto;
     left: 0;

app/javascript/styles/mastodon/statuses.scss

@@ -83,9 +83,14 @@
   background: $ui-highlight-color;
   color: $primary-text-color;
   text-transform: none;
-  line-height: 36px;
+  line-height: 1.2;
   height: auto;
-  padding: 3px 15px;
+  min-height: 36px;
+  min-width: 88px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  padding: 0 15px;
   border: 0;
 
   svg {
@@ -126,6 +131,12 @@
   }
 }
 
+a.button.logo-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .embed,
 .public-layout {
   .status__content[data-spoiler=folded] {