Fix updates button got cut off in larger viewport

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,

src/pages/home.jsx

@@ -199,6 +199,7 @@ function Home({ hidden }) {
               <Icon icon="notification" size="l" alt="Notifications" />
             </a>
           </div>
+        </header>
         {snapStates.homeNew.length > 0 && (
           <button
             class="updates-button"
@@ -220,7 +221,6 @@ function Home({ hidden }) {
             <Icon icon="arrow-up" /> New posts
           </button>
         )}
-        </header>
         {snapStates.home.length ? (
           <>
             <ul class="timeline">

src/pages/notifications.jsx

@@ -311,13 +311,13 @@ function Notifications() {
           <div class="header-side">
             <Loader hidden={uiState !== 'loading'} />
           </div>
+        </header>
         {snapStates.notificationsNew.length > 0 && (
           <button
             class="updates-button"
             type="button"
             onClick={() => {
-                const uniqueNotificationsNew =
-                  snapStates.notificationsNew.filter(
+              const uniqueNotificationsNew = snapStates.notificationsNew.filter(
                 (notification) =>
                   !snapStates.notifications.some(
                     (n) => n.id === notification.id,
@@ -336,7 +336,6 @@ function Notifications() {
             <Icon icon="arrow-up" /> New notifications
           </button>
         )}
-        </header>
         <div id="mentions-option">
           <label>
             <input