From 5faf911b17dade7bda57aaa0c6599c090947d6b7 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 4 Oct 2023 21:24:48 +0800
Subject: [PATCH] Replace scrollIntoViewIfNeeded with scrollIntoView

Because non-standard and not supported on Firefox
---
 src/components/timeline.jsx | 14 ++++++++++----
 src/pages/status.jsx        | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx
index d4ac2f19..8ec6cd95 100644
--- a/src/components/timeline.jsx
+++ b/src/components/timeline.jsx
@@ -17,6 +17,12 @@ import Link from './link';
 import NavMenu from './nav-menu';
 import Status from './status';
 
+const scrollIntoViewOptions = {
+  block: 'nearest',
+  inline: 'center',
+  behavior: 'smooth',
+};
+
 function Timeline({
   title,
   titleComponent,
@@ -111,7 +117,7 @@ function Timeline({
       }
       if (nextItem) {
         nextItem.focus();
-        nextItem.scrollIntoViewIfNeeded?.();
+        nextItem.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -121,7 +127,7 @@ function Timeline({
       });
       if (topmostItem) {
         topmostItem.focus();
-        topmostItem.scrollIntoViewIfNeeded?.();
+        topmostItem.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });
@@ -150,7 +156,7 @@ function Timeline({
       }
       if (prevItem) {
         prevItem.focus();
-        prevItem.scrollIntoViewIfNeeded?.();
+        prevItem.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -160,7 +166,7 @@ function Timeline({
       });
       if (topmostItem) {
         topmostItem.focus();
-        topmostItem.scrollIntoViewIfNeeded?.();
+        topmostItem.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 7719088f..c4165c7c 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -54,6 +54,12 @@ function resetScrollPosition(id) {
   delete scrollPositions[id];
 }
 
+const scrollIntoViewOptions = {
+  block: 'nearest',
+  inline: 'center',
+  behavior: 'smooth',
+};
+
 function StatusPage(params) {
   const { id } = params;
   const { masto, instance } = api({ instance: params.instance });
@@ -555,7 +561,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       let nextStatus = allStatusLinks[activeStatusIndex + 1];
       if (nextStatus) {
         nextStatus.focus();
-        nextStatus.scrollIntoViewIfNeeded?.();
+        nextStatus.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -565,7 +571,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       });
       if (topmostStatusLink) {
         topmostStatusLink.focus();
-        topmostStatusLink.scrollIntoViewIfNeeded?.();
+        topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });
@@ -589,7 +595,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       let prevStatus = allStatusLinks[activeStatusIndex - 1];
       if (prevStatus) {
         prevStatus.focus();
-        prevStatus.scrollIntoViewIfNeeded?.();
+        prevStatus.scrollIntoView(scrollIntoViewOptions);
       }
     } else {
       // If active status is not in viewport, get the topmost status-link in viewport
@@ -599,7 +605,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
       });
       if (topmostStatusLink) {
         topmostStatusLink.focus();
-        topmostStatusLink.scrollIntoViewIfNeeded?.();
+        topmostStatusLink.scrollIntoView(scrollIntoViewOptions);
       }
     }
   });