feat: flex 1 pages

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 && (
+            {!isEmbed && !isFullScreen && <Footer />}
-              <>
-                <div style={{ flex: 1 }} />
-                <Footer />
-              </>
-            )}
           </Flex>
         </Theme>
       </body>

src/app/tools/compare/page.tsx

@@ -652,9 +652,14 @@ export default function Page() {
       )}
 
       {members.length === 0 && (
-        <Flex align="center" mt="2" direction="column">
+        <Flex
-          <Heading>No tanks selected</Heading>
+          align="center"
-          <Text>
+          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>

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,
         }}