Make wiki-screen 20% of full screen, add more information on tunnel access of frontend.

README.md

@@ -18,3 +18,4 @@ pinned: false
 - Use `ngrok` for frontend, `ngrok http 3000` (Since it doesnt have the password issue)
 - Use `localtunnel` for backend, `ngrok http 8004` (I don't want remote users to have to enter password or click on a suspicious looking link).
 - It works, I tested it on my phone, but it doesn't work on sandbox, most likely due to sandbox's requirement of `Authentication` from backend. Throws an `Error 511`.
+- Unfortunately, user still has to visit the `localtunnel` link to avoid `Network Authentication` issue. For that they would reuire the `localtunnel` link, and a password, which can be obtianed from `https://loca.lt/mytunnelpassword`, on the device that is hosting the codebase.

frontend/src/components/Map.js

@@ -42,7 +42,7 @@ const Map = ( { onMapClick, searchQuery } ) => {
     const [markerPosition, setMarkerPosition] = useState([0,0]);
     const [wikiContent, setWikiContent] = useState(null);
     const [panelSize, setPanelSize] = useState('half');
-    const [wikiWidth, setWikiWidth] = useState(50);
+    const [wikiWidth, setWikiWidth] = useState(20);
     const isDragging = useRef(false);
     const startX = useRef(0);
     const startWidth = useRef(0);
@@ -109,6 +109,7 @@ const Map = ( { onMapClick, searchQuery } ) => {
             if (prev === 'full')  return 'half';
             return 'half';
         });
+        setWikiWidth(20);
     };
 
     return (