fix: page layouts

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/App.tsx

@@ -47,7 +47,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex h-screen overflow-x-hidden overflow-y-auto flex-col pl-10 bg-gitify-background">
+            <div className="flex flex-col min-h-screen overflow-x-hidden overflow-y-auto pl-10 bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>

src/renderer/components/__snapshots__/AllRead.test.tsx.snap

@@ -16,7 +16,7 @@ export const Centered: FC<ICentered> = ({
       align="center"
       justify="center"
       padding="spacious"
-      className={fullHeight && 'h-full'}
+      className={fullHeight && 'h-screen'}
     >
       {props.children}
     </Stack>

src/renderer/components/__snapshots__/Oops.test.tsx.snap

@@ -2,8 +2,22 @@ import { render } from '@testing-library/react';
 import { Page } from './Page';
 
 describe('renderer/components/layout/Page.tsx', () => {
-  it('should render itself & its children', () => {
-    const tree = render(<Page id="test">Test</Page>);
+  it('should render itself & its children - full', () => {
+    const tree = render(
+      <Page id="test" type="h-full">
+        Test
+      </Page>,
+    );
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render itself & its children - screen', () => {
+    const tree = render(
+      <Page id="test" type="h-screen">
+        Test
+      </Page>,
+    );
 
     expect(tree).toMatchSnapshot();
   });

src/renderer/components/layout/Centered.tsx

@@ -1,13 +1,15 @@
 import type { FC, ReactNode } from 'react';
+import { cn } from '../../utils/cn';
 
 interface IPage {
   children: ReactNode;
   id: string;
+  type: 'h-full' | 'h-screen';
 }
 
 export const Page: FC<IPage> = (props: IPage) => {
   return (
-    <div className="flex flex-col h-full" data-testid={props.id}>
+    <div className={cn('flex flex-col', props.type)} data-testid={props.id}>
       {props.children}
     </div>
   );