From 9eea4479e103e80549c6b97e39698b27a210bf9a Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 10 Nov 2025 16:33:56 +0100
Subject: [PATCH] Fix scroll shift caused by fetch-all-replies alerts (#36807)

---
 .../status/components/refresh_controller.tsx  |  2 +-
 .../styles/mastodon/components.scss           | 26 ++++++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/app/javascript/mastodon/features/status/components/refresh_controller.tsx b/app/javascript/mastodon/features/status/components/refresh_controller.tsx
index 92607797b5..e12414b720 100644
--- a/app/javascript/mastodon/features/status/components/refresh_controller.tsx
+++ b/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)}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 4eed2ebe19..57bd22007e 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3179,20 +3179,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
@@ -3203,6 +3204,7 @@ a.account__display-name {
     // Make all nested alerts occupy the same space
     // rather than stack
     grid-area: 1 / 1;
+    pointer-events: initial;
   }
 }
 
@@ -4481,13 +4483,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 {