From 9a58804142e214a9c3c20f0d78c65cbf19f2a297 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Mon, 1 May 2023 00:53:49 +0800
Subject: [PATCH] Min-height to make sure it's not too small

---
 src/pages/home.jsx               | 54 +++++++++++++++++---------------
 src/pages/notifications-menu.css |  3 ++
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index af6ac038..9a2585e6 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -169,34 +169,36 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
       <header>
         <h2>Notifications</h2>
       </header>
-      {snapStates.notifications.length ? (
-        <>
-          {snapStates.notifications
-            .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
-            .map((notification) => (
-              <Notification
-                key={notification.id}
-                instance={instance}
-                notification={notification}
-              />
-            ))}
-        </>
-      ) : uiState === 'loading' ? (
-        <div class="ui-state">
-          <Loader abrupt />
-        </div>
-      ) : (
-        uiState === 'error' && (
+      <main>
+        {snapStates.notifications.length ? (
+          <>
+            {snapStates.notifications
+              .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
+              .map((notification) => (
+                <Notification
+                  key={notification.id}
+                  instance={instance}
+                  notification={notification}
+                />
+              ))}
+          </>
+        ) : uiState === 'loading' ? (
           <div class="ui-state">
-            <p>Unable to fetch notifications.</p>
-            <p>
-              <button type="button" onClick={loadNotifications}>
-                Try again
-              </button>
-            </p>
+            <Loader abrupt />
           </div>
-        )
-      )}
+        ) : (
+          uiState === 'error' && (
+            <div class="ui-state">
+              <p>Unable to fetch notifications.</p>
+              <p>
+                <button type="button" onClick={loadNotifications}>
+                  Try again
+                </button>
+              </p>
+            </div>
+          )
+        )}
+      </main>
       <footer>
         <Link to="/mentions" class="button plain">
           <Icon icon="at" /> <span>Mentions</span>
diff --git a/src/pages/notifications-menu.css b/src/pages/notifications-menu.css
index 39e87f0e..d1f79712 100644
--- a/src/pages/notifications-menu.css
+++ b/src/pages/notifications-menu.css
@@ -34,6 +34,9 @@
   padding: 0;
   font-size: 1.2em;
 }
+.notifications-menu main {
+  min-height: 100%;
+}
 .notifications-menu .notification {
   animation: appear-smooth 0.3s ease-out 0.1s both;
 }