#8: Set a maximum width for start page

src/common/components/TopLevelCard.tsx

@@ -5,7 +5,7 @@ interface TopLevelCardProps {
   children: ReactNode;
 }
 export const TopLevelCard: FC<TopLevelCardProps> = ({ children }) => (
-  <Card raised sx={{ mx: 4, my: 2 }}>
+  <Card raised sx={{ my: 2 }}>
     {children}
   </Card>
 );

src/pages/StartPage/index.tsx

@@ -1,11 +1,12 @@
 import { LoadSaveFile } from "../../common/components/LoadSaveFile";
 import { IncludedTrackSelector } from "./IncludedTrackSelector";
 import { NewFileStarter } from "./NewFileStarter";
+import { Container } from "@mui/material";
 
 export const StartPage = () => (
-  <>
+  <Container maxWidth="md">
     <IncludedTrackSelector />
     <LoadSaveFile />
     <NewFileStarter />
-  </>
+  </Container>
 );

src/pages/ViewTrackPage.tsx

@@ -1,19 +1,21 @@
 import { FC } from "react";
-import { Panel } from "../common/components/Panel";
 import { ReturnLink, ReturnLinkContainer } from "../common/components/return-links";
 import { IncludedDataMap } from "../included-data";
 import { Track } from "../track-models";
 import { TrackLocalStorageService } from "../track-models/TrackLocalStorageService";
 import { TrackPlayer } from "../track-player";
 import { StartPage } from "./StartPage";
+import { Alert, Container } from "@mui/material";
 
 export const ViewTrackPage: FC<{ trackUuid: string }> = ({ trackUuid }) => {
   const track = loadTrackFromStorage(trackUuid);
 
   if (track === null)
     return (
       <>
-        <Panel style={{ color: "#FF8888" }}>Track with ID {trackUuid} not found.</Panel>
+        <Container maxWidth="md" sx={{ pt: 2 }}>
+          <Alert severity="error">Track with ID {trackUuid} not found.</Alert>
+        </Container>
         <StartPage />
       </>
     );