Implement new design for "Refetch all" (#36172)

app/javascript/styles/mastodon/components.scss

@@ -2969,7 +2969,6 @@ a.account__display-name {
   flex: 1 1 auto;
   flex-direction: row;
   justify-content: flex-start;
-  overflow-x: auto;
   position: relative;
 
   &.unscrollable {
@@ -3145,6 +3144,29 @@ a.account__display-name {
   }
 }
 
+.column__alert {
+  position: sticky;
+  bottom: 1rem;
+  z-index: 10;
+  box-sizing: border-box;
+  display: grid;
+  width: 100%;
+  max-width: 360px;
+  padding-inline: 10px;
+  margin-top: 1rem;
+  margin-inline: auto;
+
+  @media (max-width: #{$mobile-menu-breakpoint - 1}) {
+    bottom: 4rem;
+  }
+
+  & > * {
+    // Make all nested alerts occupy the same space
+    // rather than stack
+    grid-area: 1 / 1;
+  }
+}
+
 .ui {
   --mobile-bottom-nav-height: 55px;
   --last-content-item-border-width: 2px;
@@ -3185,7 +3207,6 @@ a.account__display-name {
 .column,
 .drawer {
   flex: 1 1 100%;
-  overflow: hidden;
 }
 
 @media screen and (width > $mobile-breakpoint) {
@@ -10397,6 +10418,21 @@ noscript {
   }
 }
 
+.notification-bar__loading-indicator {
+  --spinner-size: 22px;
+
+  position: relative;
+  height: var(--spinner-size);
+  width: var(--spinner-size);
+  margin-inline-start: 2px;
+
+  svg {
+    color: $white;
+    height: var(--spinner-size);
+    width: var(--spinner-size);
+  }
+}
+
 .hashtag-header {
   border-bottom: 1px solid var(--background-border-color);
   padding: 15px;