Min-height to make sure it's not too small

src/pages/home.jsx

@@ -169,34 +169,36 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
       <header>
         <h2>Notifications</h2>
       </header>
-      {snapStates.notifications.length ? (
+      <main>
-        <>
+        {snapStates.notifications.length ? (
-          {snapStates.notifications
+          <>
-            .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
+            {snapStates.notifications
-            .map((notification) => (
+              .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
-              <Notification
+              .map((notification) => (
-                key={notification.id}
+                <Notification
-                instance={instance}
+                  key={notification.id}
-                notification={notification}
+                  instance={instance}
-              />
+                  notification={notification}
-            ))}
+                />
-        </>
+              ))}
-      ) : uiState === 'loading' ? (
+          </>
-        <div class="ui-state">
+        ) : uiState === 'loading' ? (
-          <Loader abrupt />
-        </div>
-      ) : (
-        uiState === 'error' && (
           <div class="ui-state">
-            <p>Unable to fetch notifications.</p>
+            <Loader abrupt />
-            <p>
-              <button type="button" onClick={loadNotifications}>
-                Try again
-              </button>
-            </p>
           </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>

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;
 }