Overhaul

ui/src/components/MainLayout.tsx

@@ -0,0 +1,29 @@
+import { AppShell } from '@mantine/core';
+import { Outlet } from 'react-router';
+import { Header } from '@components/Header';
+import { Footer } from '@components/Footer';
+
+export function MainLayout() {
+  return (
+    <AppShell padding={0} mih={'100dvh'}>
+      <AppShell.Header>
+        <Header />
+      </AppShell.Header>
+      <AppShell.Main p={0} style={{ display: 'flex', minHeight: 0 }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0
+          }}
+        >
+          <Outlet />
+        </div>
+      </AppShell.Main>
+      <AppShell.Footer>
+        <Footer />
+      </AppShell.Footer>
+    </AppShell>
+  );
+}