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 3096b59..93123f9 100644 --- a/src/lib/components/room/ProjectEgg.svelte +++ b/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(); + }); + } + }); + @@ -708,7 +747,7 @@ {/if} {#if selected && !isRoomEditing} -