From a8331375ba466a1c62c6c765adc0f965b2495f9e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 4 Jan 2024 19:09:30 +0800
Subject: [PATCH] Double make sure header change doesn't block scrolling

---
 src/pages/status.css |  1 +
 src/pages/status.jsx | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/pages/status.css b/src/pages/status.css
index dbd49d12..49bca448 100644
--- a/src/pages/status.css
+++ b/src/pages/status.css
@@ -7,6 +7,7 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  align-self: stretch;
 }
 .status-deck header h1 .deck-back {
   margin-left: -16px;
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 9ac5024e..69612e4f 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -735,7 +735,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
             <>
               <InView
                 threshold={0.1}
-                onChange={setHeroInView}
+                onChange={(inView) => {
+                  queueMicrotask(() => {
+                    requestAnimationFrame(() => {
+                      setHeroInView(inView);
+                    });
+                  });
+                }}
                 class="status-focus"
                 tabIndex={0}
               >
@@ -813,7 +819,13 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
               <InView
                 skip={i !== 0 || !ancestor}
                 threshold={0.5}
-                onChange={setReachTopPost}
+                onChange={(inView) => {
+                  queueMicrotask(() => {
+                    requestAnimationFrame(() => {
+                      setReachTopPost(inView);
+                    });
+                  });
+                }}
               >
                 <Status
                   statusID={statusID}