fixed map display and fixed some routing issues for if the hunt timer runs out.

Grey = cant click
Red = current
Green = complete
blue = skipped?

app/(main)/hunt-not-started/page.js

@@ -12,6 +12,7 @@ export default function HuntNotStarted() {
   // Add aggressive hunt status checking
   useEffect(() => {
     let redirectAttempted = false;
+    let huntWasActive = null;
 
     // Function to check hunt status
     async function checkHuntStatus() {
@@ -32,11 +33,22 @@ export default function HuntNotStarted() {
         if (response.ok) {
           const data = await response.json();
 
+          // Check if hunt ended (was active before but not active now)
+          if (huntWasActive === true && !data.active) {
+            console.log("Hunt ended! Redirecting to leaderboard");
+            redirectAttempted = true;
+            window.location.replace("/leaderboard?huntEnded=true");
+            return;
+          }
+
           // If hunt becomes active while on this page, immediately redirect to map
           if (data.active) {
+            huntWasActive = true;
             console.log("Hunt now active! Redirecting to map page");
             redirectAttempted = true;
             window.location.replace("/map");
+          } else {
+            huntWasActive = false;
           }
         }
       } catch (err) {

app/(main)/map/map.module.css

@@ -64,50 +64,47 @@
   height: 100%;
   background-color: #69b5a8; /* Background color */
   overflow: auto; /* Enable scrolling */
-  display: flex; /* Add flexbox to center content */
-  justify-content: center; /* Center horizontally */
-  align-items: center; /* Center vertically */
+  display: block; /* Change from flex to block for proper scrolling */
 }
 
 .treasure-map {
   position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex; /* Add flexbox for centering */
-  justify-content: center;
-  align-items: center;
+  width: fit-content; /* Change from 100% to fit-content to allow natural svg size */
+  min-width: 100%; /* Ensure it's at least full width */
+  height: fit-content;
+  min-height: 100%;
+  display: flex; /* Keep flex for alignment */
+  justify-content: flex-end; /* Align to the right */
+  align-items: flex-start; /* Align to the top */
 }
 
 /* SVG container for better scrolling and zooming */
 .svg-container {
   position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: visible; /* Change from auto to visible */
+  width: fit-content; /* Allow natural width */
+  height: fit-content; /* Allow natural height */
+  display: block; /* Change to block for proper scrolling */
+  overflow: visible; /* Show content beyond boundaries */
 }
 
 .svg-container svg {
-  max-width: 100%;
-  max-height: 90vh; /* Limit height to 90% of viewport height */
+  max-width: none; /* Remove max-width limitation */
   width: auto;
   height: auto;
   display: block;
-  object-fit: contain; /* Ensure the entire SVG is visible */
+  object-fit: none; /* Don't constrain the SVG */
 }
 
 /* Map background - display as full-page map */
 .map-background {
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  right: 0; /* Align to the right */
+  width: 100vw; /* Full viewport width */
+  height: auto;
   background-image: url("/images/map.svg");
-  background-size: contain;
-  background-position: center;
+  background-size: auto; /* Don't resize the background */
+  background-position: top right; /* Position at top right */
   background-repeat: no-repeat;
   z-index: 5;
 }

app/(main)/map/page.js

@@ -483,8 +483,23 @@ export default function MapPage() {
         const data = await response.json();
         console.log("Map page hunt status check:", data);
 
-        // If hunt is not active, force redirect to waiting page
+        // If hunt is not active, check if it was active before (hunt ended)
         if (!data.active) {
+          // Check if we had an active hunt before
+          const timerData = getHuntTimer();
+
+          if (timerData && timerData.isActive) {
+            // Hunt was active before but not now - it has ended
+            console.log("Hunt has ended, redirecting to leaderboard");
+            clearHuntTimer();
+
+            if (isMounted.current) {
+              hardRedirect("/leaderboard?huntEnded=true");
+            }
+            return;
+          }
+
+          // If hunt was never active, redirect to waiting page
           console.log("Hunt not active, redirecting to waiting page");
           if (isMounted.current) {
             softRedirect("/waiting");
@@ -496,7 +511,8 @@ export default function MapPage() {
         if (data.endTime && new Date(data.endTime) <= new Date()) {
           console.log("Timer expired, redirecting to leaderboard");
           if (isMounted.current) {
-            softRedirect("/leaderboard?huntEnded=true");
+            clearHuntTimer();
+            hardRedirect("/leaderboard?huntEnded=true");
           }
           return;
         }
@@ -515,7 +531,7 @@ export default function MapPage() {
     const intervalId = setInterval(checkHuntStatus, 1000);
 
     return () => clearInterval(intervalId);
-  }, [softRedirect]);
+  }, [softRedirect, hardRedirect]);
 
   if (status === "loading" || loading) {
     return (
@@ -572,7 +588,7 @@ export default function MapPage() {
         <div className={styles["team-code"]}>{teamData?.team?.code || ""}</div>
       </div>
 
-      {/* Main map content area - map fills the entire container */}
+      {/* Main map content area - now allows scrolling with right alignment */}
       <div className={styles["map-container"]} ref={mapContainerRef}>
         <div className={styles["treasure-map"]}>
           {mapSvg ? (