From 54c7d4a6d417818373016dce43722a84881d977d Mon Sep 17 00:00:00 2001
From: shaubby <52765209+shaubby@users.noreply.github.com>
Date: Thu, 23 Oct 2025 19:28:07 -0500
Subject: [PATCH] fixed the popups going out of the window

---
 src/lib/components/NavigationButtons.svelte |  4 +-
 src/lib/components/room/ProjectEgg.svelte   | 41 ++++++++++++++++++++-
 src/routes/home/+page.svelte                |  4 +-
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/NavigationButtons.svelte b/src/lib/components/NavigationButtons.svelte
index 34a5177..3485d64 100644
--- a/src/lib/components/NavigationButtons.svelte
+++ b/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;
 }
 
diff --git a/src/lib/components/room/ProjectEgg.svelte b/src/lib/components/room/ProjectEgg.svelte
index a714ab1..468988f 100644
--- a/src/lib/components/room/ProjectEgg.svelte
+++ b/src/lib/components/room/ProjectEgg.svelte
@@ -662,6 +662,9 @@
     }
   }
 
+  let menu;
+
+
   // Fetch submission data when project is selected and shipped
   $effect(() => {
     if (selected && projInfo.status === 'submitted' && !yswsSubmissionData && !isLoadingSubmission) {
@@ -669,6 +672,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>
 
 
@@ -689,7 +728,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">
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index ef43eda..7bd3105 100644
--- a/src/routes/home/+page.svelte
+++ b/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