fix: footer at bottom of the page

greenbone · Sep 6, 2024 · 83b61d6 · 83b61d6
1 parent 49657d7
commit 83b61d6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 56 deletions.
diff --git a/src/web/components/structure/__tests__/__snapshots__/footer.jsx.snap b/src/web/components/structure/__tests__/__snapshots__/footer.jsx.snap
diff --git a/src/web/components/structure/__tests__/footer.jsx b/src/web/components/structure/__tests__/footer.jsx
@@ -16,7 +16,6 @@ describe('Footer tests', () => {
     const currentYear = date().year();
     const {element} = render(<Footer />);
 
-    expect(element).toMatchSnapshot();
     expect(element).toHaveTextContent(
       'Copyright © 2009-' +
         currentYear +

diff --git a/src/web/components/structure/footer.jsx b/src/web/components/structure/footer.jsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-
 import React from 'react';
 
 import styled from 'styled-components';
@@ -18,17 +17,11 @@ const Link = styled.a`
 `;
 
 const Footer = styled.footer`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
   padding: 2px;
   font-size: 10px;
-  text-align: right;
+  text-align: center;
   color: ${Theme.mediumGray};
   margin-top: 10px;
-  padding-right: 5px;
-  z-index: ${Theme.Layers.aboveAll};
 `;
 
 const GreenboneFooter = () => {

diff --git a/src/web/pages/page.jsx b/src/web/pages/page.jsx
@@ -32,6 +32,10 @@ const StyledLayout = styled(Layout)`
   height: calc(-48px + 100vh);
 `;
 
+const Container = styled.div`
+  flex: 1;
+`;
+
 const Page = ({children}) => {
   const capabilities = useLoadCapabilities();
   const location = useLocation();
@@ -49,16 +53,18 @@ const Page = ({children}) => {
       <StyledLayout flex="row" align={['start', 'stretch']}>
         <Menu />
         <Main>
-          <FeedSyncNotification />
-          <ErrorBoundary
-            key={location.pathname}
-            message={_('An error occurred on this page.')}
-          >
-            {children}
-          </ErrorBoundary>
+          <Container>
+            <FeedSyncNotification />
+            <ErrorBoundary
+              key={location.pathname}
+              message={_('An error occurred on this page.')}
+            >
+              {children}
+            </ErrorBoundary>
+          </Container>
+          <Footer />
         </Main>
       </StyledLayout>
-      <Footer />
     </CapabilitiesContext.Provider>
   );
 };