shell-ui: Add style to top level container

scality · Dec 16, 2021 · 0dbba18 · 0dbba18
1 parent 298082f
commit 0dbba18
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/shell-ui/src/FederatedApp.jsx b/shell-ui/src/FederatedApp.jsx
@@ -16,7 +16,10 @@ import ReactDOM from 'react-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import ErrorPage500 from '@scality/core-ui/dist/components/error-pages/ErrorPage500.component';
 import ScrollbarWrapper from '@scality/core-ui/dist/components/scrollbarwrapper/ScrollbarWrapper.component';
-import { ThemeProvider as StyledComponentsProvider } from 'styled-components';
+import {
+  styled,
+  ThemeProvider as StyledComponentsProvider,
+} from 'styled-components';
 import type { Theme } from './navbar/theme';
 import { SolutionsNavbar, type Browser } from './navbar';
 import { string } from 'prop-types';
@@ -37,11 +40,7 @@ import {
   useConfigRetriever,
   useDiscoveredViews,
 } from './initFederation/ConfigurationProviders';
-import {
-  Route,
-  Switch,
-  Router,
-} from 'react-router-dom';
+import { Route, Switch, Router } from 'react-router-dom';
 import {
   ShellConfigProvider,
   useShellConfig,
@@ -55,6 +54,12 @@ import { useLanguage } from './navbar/lang';
 import './index.css';
 import { ShellHistoryProvider } from './initFederation/ShellHistoryProvider';
 
+const AppTopLevelContainer = styled.div`
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+`;
+
 export const queryClient: typeof QueryClient = new QueryClient();
 
 function FederatedRoute({
@@ -203,13 +208,15 @@ function WithInitFederationProviders({ children }: { children: Node }) {
 export default function App(): Node {
   return (
     <ScrollbarWrapper>
-      <QueryClientProvider client={queryClient} contextSharing={true}>
-        <ShellConfigProvider shellConfigUrl={'/shell/config.json'}>
-          <WithInitFederationProviders>
-            <InternalApp />
-          </WithInitFederationProviders>
-        </ShellConfigProvider>
-      </QueryClientProvider>
+      <AppTopLevelContainer>
+        <QueryClientProvider client={queryClient} contextSharing={true}>
+          <ShellConfigProvider shellConfigUrl={'/shell/config.json'}>
+            <WithInitFederationProviders>
+              <InternalApp />
+            </WithInitFederationProviders>
+          </ShellConfigProvider>
+        </QueryClientProvider>
+      </AppTopLevelContainer>
     </ScrollbarWrapper>
   );
 }