From f516c9275ebf231827291b6d6d7574e4c764c24a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sat, 6 Apr 2024 12:49:38 -0500
Subject: [PATCH] feat: flex 1 pages

---
 src/app/layout.tsx             |  9 ++-------
 src/app/tools/compare/page.tsx | 11 ++++++++---
 src/components/PageWrapper.tsx | 10 +++++++++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b0d06929d..10682cb02 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -100,14 +100,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
               </AlertDialog.Content>
             </AlertDialog.Root>
 
-            <Flex direction="column">{children}</Flex>
+            {children}
 
-            {!isEmbed && !isFullScreen && (
-              <>
-                <div style={{ flex: 1 }} />
-                <Footer />
-              </>
-            )}
+            {!isEmbed && !isFullScreen && <Footer />}
           </Flex>
         </Theme>
       </body>
diff --git a/src/app/tools/compare/page.tsx b/src/app/tools/compare/page.tsx
index 3e7c0dbc0..c9aef7c38 100644
--- a/src/app/tools/compare/page.tsx
+++ b/src/app/tools/compare/page.tsx
@@ -652,9 +652,14 @@ export default function Page() {
       )}
 
       {members.length === 0 && (
-        <Flex align="center" mt="2" direction="column">
-          <Heading>No tanks selected</Heading>
-          <Text>
+        <Flex
+          align="center"
+          justify="center"
+          direction="column"
+          style={{ flex: 1 }}
+        >
+          <Heading color="gray">No tanks selected</Heading>
+          <Text color="gray">
             Press the <PlusIcon /> Add button to get started
           </Text>
         </Flex>
diff --git a/src/components/PageWrapper.tsx b/src/components/PageWrapper.tsx
index d8361b631..1f95cb17b 100644
--- a/src/components/PageWrapper.tsx
+++ b/src/components/PageWrapper.tsx
@@ -13,7 +13,14 @@ export default function PageWrapper({
   ...props
 }: PageWrapperProps) {
   return (
-    <Theme accentColor={color}>
+    <Theme
+      accentColor={color}
+      style={{
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
       <Flex
         direction="column"
         gap="4"
@@ -23,6 +30,7 @@ export default function PageWrapper({
           margin: 'auto',
           padding: 16,
           boxSizing: 'border-box',
+          flex: 1,
 
           ...style,
         }}