spacings + preview network expose + other

Author: stone-w4tch3r

web/package.json

@@ -6,10 +6,10 @@
   "type": "module",
   "scripts": {
     "deploy": "gh-pages -d build",
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview --host"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",

web/src/chartModule/ChartPage.tsx

@@ -10,16 +10,22 @@ import {ChartControlsCard} from "./components/ChartControlsCard.tsx";
 const ChartPage: React.FC = () => {
     const [numPoints, setNumPoints] = useState<number>(11);
     const {chartName, points, tracks, isLoading, error, fetchRoute} = useFetchRoute(numPoints);
+    const spacingMobile = 2;
+    const spacingAdaptive = 4;
 
     return <Box sx={{display: 'flex', flexDirection: 'column', minHeight: '100vh'}}>
         <Topbar/>
-        <Box sx={{py: 5, px: 5, flexGrow: 1}}>
-            <Grid container spacing={5}>
+        <Box sx={{
+            py: {xs: spacingMobile, md: spacingAdaptive},
+            px: {xs: spacingMobile, md: spacingAdaptive},
+            flexGrow: 1
+        }}>
+            <Grid container spacing={{xs: spacingMobile, md: spacingAdaptive}}>
                 <Grid item xs={12}>
                     <DescriptionCard/>
                 </Grid>
                 <Grid item xs={12} md={8}>
-                    <ChartCard params={{points, tracks, isLoading, error}}/>
+                    <ChartCard points={points} tracks={tracks} isLoading={isLoading} error={error}/>
                 </Grid>
                 <Grid item xs={12} md={4}>
                     <ChartControlsCard

web/src/chartModule/components/ChartCard.tsx

@@ -12,7 +12,7 @@ export interface IChartProps {
     error: string | null;
 }
 
-export const ChartCard: React.FC<{ params: IChartProps }> = ({params: {points, tracks, isLoading, error}}) => {
+export const ChartCard: React.FC<IChartProps> = ({points, tracks, isLoading, error}) => {
     return <StyledCard>
         <CardHeader title="Route Chart"/>
         <CardContent sx={{width: "100%", height: "100%", p: 0}}>
@@ -44,7 +44,7 @@ function renderChartCardContent({points, tracks, isLoading, error}: IChartProps)
         </Box>
     }
     if (error) {
-        return <Card sx={{
+        return <Box sx={{
             bgcolor: "pink",
             width: "100%",
             height: "100%",
@@ -54,7 +54,7 @@ function renderChartCardContent({points, tracks, isLoading, error}: IChartProps)
             alignItems: "center"
         }}>
             <Typography variant="h4" color="error">{error}</Typography>
-        </Card>
+        </Box>
     }
     return <Chart points={points} tracks={tracks}/>;
 }