ServerNotification rendered in Board

src/App/App.js

@@ -5,7 +5,7 @@ const React = require('react');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { ToastProvider, ServerNotification, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
+const { ToastProvider, sanitizeLocationPath, CONSTANTS } = require('stremio/common');
 const CoreEventsToaster = require('./CoreEventsToaster');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
@@ -98,7 +98,6 @@ const App = () => {
                         :
                         <div className={styles['app-loader']} />
                 }
-                <ServerNotification />
             </ServicesProvider>
         </React.StrictMode>
     );

src/common/ServerNotification/styles.less

@@ -3,11 +3,8 @@
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
 .notification-container {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
+    flex: none;
+    align-self: stretch;
     display: flex;
     flex-direction: row;
     padding: 0.5rem 1rem;

src/routes/Board/Board.js

@@ -2,7 +2,7 @@
 
 const React = require('react');
 const classnames = require('classnames');
-const { MainNavBars, MetaRow, LibItem, MetaItem } = require('stremio/common');
+const { MainNavBars, MetaRow, LibItem, MetaItem, ServerNotification } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
@@ -11,6 +11,7 @@ const Board = () => {
     const board = useBoard();
     const continueWatchingPreview = useContinueWatchingPreview();
     return (
+        <div className={styles['board-content-container']}>
             <MainNavBars className={styles['board-container']} route={'board'}>
                 <div className={styles['board-content']}>
                     {
@@ -64,6 +65,8 @@ const Board = () => {
                     })}
                 </div>
             </MainNavBars>
+            <ServerNotification />
+        </div>
     );
 };
 

src/routes/Board/styles.less

@@ -11,9 +11,15 @@
     meta-item-placeholder: meta-item;
 }
 
-.board-container {
+.board-content-container {
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .board-container {
+        flex: 1;
+        align-self: stretch;
         background-color: @color-background-dark2;
 
         .board-content {
@@ -34,6 +40,7 @@
             }
         }
     }
+}
 
 @media only screen and (max-width: @large) {
     .board-container {