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

pull/122/head
Lim Chee Aun 2023-05-01 00:53:49 +08:00
rodzic ee2e78228e
commit 9a58804142
2 zmienionych plików z 31 dodań i 26 usunięć

Wyświetl plik

@ -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>

Wyświetl plik

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