CHAL-16: Fixed page height

.storybook/main.ts

@@ -27,6 +27,5 @@ const config: StorybookConfig = {
   babel: {
     presets: ['next/babel'],
   },
-
 };
 export default config;

src/__tests__/unit/components/utils/page-container/page-container.snapshot.tsx

@@ -8,4 +8,13 @@ describe('PageContainer', () => {
     const { container } = render(<PageContainer />);
     expect(container).toMatchSnapshot();
   });
+  it('applies the correct min-height style.', () => {
+    const { getByTestId } = render(<PageContainer />);
+    const pageContainer = getByTestId('page-container');
+    const navbarHeight = '57px'; 
+    const footerHeight = '60px'; //footer padding 30x top and bottom
+    const expectedMinHeight = `calc(100vh - ${navbarHeight} - ${footerHeight})`;
+
+    expect(pageContainer).toHaveStyle(`min-height: ${expectedMinHeight}`);
+  });
 });

src/components/utils/page-container/page-container.tsx

@@ -7,7 +7,7 @@ import styles from './styles.module.scss';
  */
 export function PageContainer({ children }: PropsWithChildren) {
   return (
-    <div className={styles.outer_container}>
+    <div className={styles.outer_container} data-testid="page-container">
       <div className={styles.inner_container}>{children}</div>
     </div>
   );

src/components/utils/page-container/styles.module.scss

@@ -4,7 +4,9 @@
   display: flex;
   justify-content: center;
   width: 100%;
-  height: 100%;
+  //height: 100%;
+  //Calculate minimum height of the page
+  min-height: calc(100vh - #{partials.$navigation-height} - 60px); 
   margin-top: partials.$navigation-height;
   min-width: partials.$page-width-min;
   z-index: 0;

src/styles/partials/variables/_navigation.scss

@@ -1 +1,2 @@
-$height: 57px;
+$height: 57px;
+//@forward 'navigation'