fix: layout consistency

Author: AnushkaNilangekar

app/src/Router.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/Home.page';
-import LearnAiMlPage from './pages/Learn-ai-ml.page';
+import LearnAiMlPage from './pages/ML.page';
 import PoliciesPage from './pages/Policies.page';
 import PopulationsPage from './pages/Populations.page';
 import ReportOutputPage from './pages/ReportOutput.page';

app/src/components/TwoColumnView.tsx

@@ -1,4 +1,4 @@
-import { Grid, Paper, Title } from '@mantine/core';
+import { Grid, Paper, Title, Box } from '@mantine/core';
 import { colors, spacing, typography } from '@/designTokens';
 
 interface TwoColumnViewProps {
@@ -22,26 +22,34 @@ const TwoColumnView = ({ title, leftColumn, rightColumn, backgroundColor }: TwoC
   return (
     <Paper
       bg={getBackgroundColor()}
-      p={spacing.container.lg}
+      p={spacing['3xl']}
       radius={spacing.radius.lg}
       style={{ minHeight: '400px' }}
     >
-      <Title
-        order={2}
-        variant="colored"
-        ff={typography.fontFamily.primary}
-        size={typography.fontSize['3xl']}
-        fw={typography.fontWeight.bold}
-        c={colors.text.title}
-        mb={spacing['3xl']}
-        ta="left"
+      <Box
+        px={spacing.xl}
+        style={{
+          maxWidth: 1300,
+          margin: '0 auto',
+        }}
       >
-        {title}
-      </Title>
-      <Grid gutter={spacing['3xl']} align="center">
-        <Grid.Col span={{ base: 12, sm: 6 }}>{leftColumn}</Grid.Col>
-        <Grid.Col span={{ base: 12, sm: 6 }}>{rightColumn}</Grid.Col>
-      </Grid>
+        <Title
+          order={2}
+          variant="colored"
+          ff={typography.fontFamily.primary}
+          size={typography.fontSize['3xl']}
+          fw={typography.fontWeight.bold}
+          c={colors.text.title} 
+          mb={spacing['3xl']}
+          ta="left"
+        >
+          {title}
+        </Title>
+        <Grid gutter={spacing['3xl']} align="center">
+          <Grid.Col span={{ base: 12, sm: 6 }}>{leftColumn}</Grid.Col>
+          <Grid.Col span={{ base: 12, sm: 6 }}>{rightColumn}</Grid.Col>
+        </Grid>
+      </Box>
     </Paper>
   );
 };

app/src/components/shared/static/PageHeader.tsx

@@ -16,42 +16,50 @@ export default function PageHeader({ title, description }: PageHeaderProps) {
         borderBottom: `1px solid ${colors.border.dark}`,
       }}
     >
-      <Flex
-        direction={{ base: 'column', md: 'row' }}
-        align={{ base: 'stretch', md: 'center' }}
-        gap={{ base: 'md', md: 'xl' }}
+      <Box
+        px={spacing.xl}
+        style={{
+          maxWidth: 1300,
+          margin: '0 auto',
+        }}
       >
-        <Box w={{ base: '100%', md: 300 }}>
-          <Title
-            variant="colored"
-            style={{
-              fontSize: typography.fontSize['4xl'],
-              fontWeight: typography.fontWeight.semibold,
-              fontFamily: typography.fontFamily.primary,
-            }}
-          >
-            {title}
-          </Title>
-        </Box>
+        <Flex
+          direction={{ base: 'column', md: 'row' }}
+          align={{ base: 'stretch', md: 'center' }}
+          gap={{ base: 'md', md: 'xl' }}
+        >
+          <Box w={{ base: '100%', md: 300 }}>
+            <Title
+              variant="colored"
+              style={{
+                fontSize: typography.fontSize['4xl'],
+                fontWeight: typography.fontWeight.semibold,
+                fontFamily: typography.fontFamily.primary,
+              }}
+            >
+              {title}
+            </Title>
+          </Box>
 
-        <Divider orientation="horizontal" size="xs" color={colors.border.light} hiddenFrom="md" />
+          <Divider orientation="horizontal" size="xs" color={colors.border.light} hiddenFrom="md" />
 
-        <Divider orientation="vertical" size="xs" color={colors.border.light} visibleFrom="md" />
+          <Divider orientation="vertical" size="xs" color={colors.border.light} visibleFrom="md" />
 
-        <Box w={{ base: '100%', md: 'auto' }}>
-          <Text
-            style={{
-              color: colors.text.primary,
-              fontSize: typography.fontSize.lg,
-              lineHeight: typography.lineHeight.relaxed,
-              fontFamily: typography.fontFamily.body,
-            }}
-            ta={{ base: 'left', md: 'center' }}
-          >
-            {description}
-          </Text>
-        </Box>
-      </Flex>
+          <Box w={{ base: '100%', md: 'auto' }}>
+            <Text
+              style={{
+                color: colors.text.primary,
+                fontSize: typography.fontSize.lg,
+                lineHeight: typography.lineHeight.relaxed,
+                fontFamily: typography.fontFamily.body,
+              }}
+              ta={{ base: 'left', md: 'center' }}
+            >
+              {description}
+            </Text>
+          </Box>
+        </Flex>
+      </Box>
     </Box>
   );
 }