center content in desktop view

For a better experience when viewing in a desktop browser

Author: yepzdk

src/App.jsx

@@ -35,7 +35,7 @@ function App() {
       lat,
       long,
     }),
-    [lat, long],
+    [lat, long]
   );
 
   function handlePermissionInfoBanner() {
@@ -49,7 +49,7 @@ function App() {
             <Link className="underline" to="/navigation-help">
               Hjælp til navigation
             </Link>
-          </span>,
+          </span>
         );
       }
     });
@@ -93,7 +93,7 @@ function App() {
   }, [openStreetMapConsent]);
 
   return (
-    <div className="App flex flex-col h-full pt-24 min-h-screen dark:text-white w-screen pl-3 pr-3 pb-3 text-zinc-800 bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
+    <div className="App md:max-w-4xl ml-auto mr-auto flex flex-col h-full pt-24 min-h-screen dark:text-white w-screen pl-3 pr-3 pb-3 text-zinc-800 bg-zinc-100 dark:bg-zinc-800 overflow-hidden">
       <LatLongContext.Provider value={contextLatLong}>
         <PermissionContext.Provider
           value={useMemo(() => ({ openStreetMapConsent, setOpenStreetMapConsent }), [openStreetMapConsent])}
@@ -108,7 +108,7 @@ function App() {
                 listOfUnlocked,
                 setListOfUnlocked,
               }),
-              [selectedRoute, nextUnlockablePointId, listOfUnlocked],
+              [selectedRoute, nextUnlockablePointId, listOfUnlocked]
             )}
           >
             <SkipLinks />
@@ -129,7 +129,7 @@ function App() {
                     infoText,
                     setInfoText,
                   }),
-                  [error, errorText, info, infoText],
+                  [error, errorText, info, infoText]
                 )}
               >
                 <Switch>

src/components/Navbar.jsx

@@ -9,7 +9,7 @@ const Navbar = () => {
   const { pathname } = useLocation();
 
   return (
-    <nav className="fixed top-0 left-0 right-0 p-3 bg-zinc-100 dark:bg-zinc-800 z-50">
+    <nav className="md:max-w-4xl ml-auto mr-auto fixed top-0 left-0 right-0 p-3 bg-zinc-100 dark:bg-zinc-800 z-50">
       <div className="mb-6 mt-4 flex justify-between">
         {pathname === "/" && (
           <Link to="/">