make the project popups not go off the screen

src/lib/components/NavigationButtons.svelte

@@ -39,7 +39,7 @@ let {
 }
 
 .bottom-buttons {
-  z-index: 2;
+  z-index: 1;
   bottom: 0;
   width: 100%;
   top: auto;
@@ -82,7 +82,7 @@ let {
 
 .bottom-right-buttons {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 20px;
 }
 

src/lib/components/room/ProjectEgg.svelte

@@ -668,6 +668,9 @@
     }
   }
 
+  let menu;
+
+
   // Fetch submission data when project is selected and shipped
   // Using derived values to prevent unnecessary re-runs
   $effect(() => {
@@ -688,6 +691,42 @@
     }
   });
 
+   function clampVertical() {
+    if (!menu) return;
+
+    const rect = menu.getBoundingClientRect();
+    const padding = 12; // small margin from screen edge
+
+    // Calculate the desired top position
+    let newTop = rect.top;
+
+    // If above viewport
+    if (rect.top < padding) {
+      const shift = padding - rect.top;
+      menu.style.top = `${menu.offsetTop + shift}px`;
+      menu.style.transform = ''; // cancel translate if we’re adjusting
+    }
+    // If below viewport
+    else if (rect.bottom > window.innerHeight - padding) {
+      const shift = rect.bottom - (window.innerHeight - padding);
+      menu.style.top = `${menu.offsetTop - shift}px`;
+      menu.style.transform = '';
+    }
+  }
+
+  $effect(() => {
+    if (selected) {
+        queueMicrotask(() => {
+        clampVertical();
+
+        // Watch for animation growth
+        const observer = new ResizeObserver(clampVertical);
+        observer.observe(menu);
+        return () => observer.disconnect();
+      });
+    }
+  });
+
 </script>
 
 
@@ -708,7 +747,7 @@
 {/if}
 
 {#if selected && !isRoomEditing}
-<div class="project-info" transition:slide={{duration: 200}}>
+<div bind:this={menu} class="project-info" transition:slide={{duration: 200}}>
 
   <div class="project-header">
     <div class="project-main-info">

src/routes/home/+page.svelte

@@ -263,12 +263,12 @@ onMount(() => {
 
 
 
-
 <!-- Navigation Buttons -->
 <NavigationButtons 
   onOpenFaq={() => { showFaqPopup = true; }}
 />
 
+
 <!-- Your Room -->
 <div class="user-room">
   <Room 
@@ -283,6 +283,8 @@ onMount(() => {
   />
 </div>
 
+
+
 {#if showRouletteSpinWheel}
   <div class="page-level-spin-overlay">
     <SpinWheel