From d2d8571b3fbc3046eae81dfa346f4f59bc8c2b53 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 1 Jan 2023 19:24:08 +0800
Subject: [PATCH] Fix updates button got cut off in larger viewport

---
 src/app.css                 |  6 +++--
 src/pages/home.jsx          | 42 +++++++++++++++----------------
 src/pages/notifications.jsx | 49 ++++++++++++++++++-------------------
 3 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/app.css b/src/app.css
index ebb37d1e..f3817a1d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -430,15 +430,17 @@ a.mention span {
     opacity: 0;
   }
   100% {
-    transform: translate(-50%, 150%);
+    transform: translate(-50%, 0);
     opacity: 1;
   }
 }
 .updates-button {
   position: absolute;
+  z-index: 1;
   animation: fade-from-top 2s ease-out;
   left: 50%;
-  transform: translate(-50%, 150%);
+  margin-top: 8px;
+  transform: translate(-50%, 0);
   font-size: 90%;
   background: linear-gradient(
     to bottom,
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index f6c2d96d..4b2ec205 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -199,28 +199,28 @@ function Home({ hidden }) {
               <Icon icon="notification" size="l" alt="Notifications" />
             </a>
           </div>
-          {snapStates.homeNew.length > 0 && (
-            <button
-              class="updates-button"
-              type="button"
-              onClick={() => {
-                const uniqueHomeNew = snapStates.homeNew.filter(
-                  (status) => !states.home.some((s) => s.id === status.id),
-                );
-                states.home.unshift(...uniqueHomeNew);
-                loadStatuses(true);
-                states.homeNew = [];
-
-                scrollableRef.current?.scrollTo({
-                  top: 0,
-                  behavior: 'smooth',
-                });
-              }}
-            >
-              <Icon icon="arrow-up" /> New posts
-            </button>
-          )}
         </header>
+        {snapStates.homeNew.length > 0 && (
+          <button
+            class="updates-button"
+            type="button"
+            onClick={() => {
+              const uniqueHomeNew = snapStates.homeNew.filter(
+                (status) => !states.home.some((s) => s.id === status.id),
+              );
+              states.home.unshift(...uniqueHomeNew);
+              loadStatuses(true);
+              states.homeNew = [];
+
+              scrollableRef.current?.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+            }}
+          >
+            <Icon icon="arrow-up" /> New posts
+          </button>
+        )}
         {snapStates.home.length ? (
           <>
             <ul class="timeline">
diff --git a/src/pages/notifications.jsx b/src/pages/notifications.jsx
index 8597e073..bca1d660 100644
--- a/src/pages/notifications.jsx
+++ b/src/pages/notifications.jsx
@@ -311,32 +311,31 @@ function Notifications() {
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
           </div>
-          {snapStates.notificationsNew.length > 0 && (
-            <button
-              class="updates-button"
-              type="button"
-              onClick={() => {
-                const uniqueNotificationsNew =
-                  snapStates.notificationsNew.filter(
-                    (notification) =>
-                      !snapStates.notifications.some(
-                        (n) => n.id === notification.id,
-                      ),
-                  );
-                states.notifications.unshift(...uniqueNotificationsNew);
-                loadNotifications(true);
-                states.notificationsNew = [];
-
-                scrollableRef.current?.scrollTo({
-                  top: 0,
-                  behavior: 'smooth',
-                });
-              }}
-            >
-              <Icon icon="arrow-up" /> New notifications
-            </button>
-          )}
         </header>
+        {snapStates.notificationsNew.length > 0 && (
+          <button
+            class="updates-button"
+            type="button"
+            onClick={() => {
+              const uniqueNotificationsNew = snapStates.notificationsNew.filter(
+                (notification) =>
+                  !snapStates.notifications.some(
+                    (n) => n.id === notification.id,
+                  ),
+              );
+              states.notifications.unshift(...uniqueNotificationsNew);
+              loadNotifications(true);
+              states.notificationsNew = [];
+
+              scrollableRef.current?.scrollTo({
+                top: 0,
+                behavior: 'smooth',
+              });
+            }}
+          >
+            <Icon icon="arrow-up" /> New notifications
+          </button>
+        )}
         <div id="mentions-option">
           <label>
             <input