Fix scroll shift caused by fetch-all-replies alerts (#36807)

app/javascript/mastodon/features/status/components/refresh_controller.tsx

@@ -295,7 +295,7 @@ export const RefreshController: React.FC<{
   if (loadingState === 'loading') {
     return (
       <div
-        className='load-more load-gap'
+        className='load-more load-more--large'
         aria-busy
         aria-live='polite'
         aria-label={intl.formatMessage(messages.loadingInitial)}

app/javascript/styles/mastodon/components.scss

@@ -3181,20 +3181,21 @@ a.account__display-name {
 }
 
 .column__alert {
+  --alert-height: 54px;
+
   position: sticky;
   bottom: 0;
   z-index: 10;
   box-sizing: border-box;
   display: grid;
+  grid-template-rows: minmax(var(--alert-height), max-content);
+  align-items: end;
   width: 100%;
   max-width: 360px;
   padding: 1rem;
   margin: auto auto 0;
   overflow: clip;
-
-  &:empty {
-    padding: 0;
-  }
+  pointer-events: none;
 
   @media (max-width: #{$mobile-menu-breakpoint - 1}) {
     // Compensate for mobile menubar
@@ -3205,6 +3206,7 @@ a.account__display-name {
     // Make all nested alerts occupy the same space
     // rather than stack
     grid-area: 1 / 1;
+    pointer-events: initial;
   }
 }
 
@@ -4484,13 +4486,19 @@ a.status-card {
   box-sizing: border-box;
   text-decoration: none;
 
-  &:hover {
-    background: var(--on-surface-color);
+  &--large {
+    padding-block: 32px;
   }
 
-  &:focus-visible {
-    outline: 2px solid $ui-button-focus-outline-color;
-    outline-offset: -2px;
+  &:is(button) {
+    &:hover {
+      background: var(--on-surface-color);
+    }
+
+    &:focus-visible {
+      outline: 2px solid $ui-button-focus-outline-color;
+      outline-offset: -2px;
+    }
   }
 
   .icon {