center content in desktop view

For a better experience when viewing in a desktop browser

Author: yepzdk

src/App.jsx

@@ -29,7 +29,7 @@ function App() {
       lat,
       long,
     }),
-    [lat, long],
+    [lat, long]
   );
 
   function startLocationPrompter() {
@@ -58,7 +58,7 @@ function App() {
   }, []);
 
   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])}
@@ -73,7 +73,7 @@ function App() {
                 listOfUnlocked,
                 setListOfUnlocked,
               }),
-              [selectedRoute, nextUnlockablePointId, listOfUnlocked],
+              [selectedRoute, nextUnlockablePointId, listOfUnlocked]
             )}
           >
             <Navbar />
@@ -86,7 +86,7 @@ function App() {
                     errorText,
                     setErrorText,
                   }),
-                  [error, errorText],
+                  [error, errorText]
                 )}
               >
                 <Switch>

src/components/Navbar.jsx

@@ -9,7 +9,7 @@ const Navbar = () => {
   const { pathname } = useLocation();
 
   return (
-    <div className="fixed top-0 left-0 right-0 p-2 bg-zinc-100 dark:bg-zinc-800 z-40">
+    <div className="md:max-w-4xl ml-auto mr-auto fixed top-0 left-0 right-0 px-3 bg-zinc-100 dark:bg-zinc-800 z-40">
       <div className="mb-6 mt-4 flex justify-between">
         {pathname === "/" && <img src={Logo} alt="" className="w-10 h-10" />}
         {pathname !== "/" && <BackButton />}