diff --git a/src/components/SasquatchGuide.tsx b/src/components/SasquatchGuide.tsx index f496abc..3ea2066 100644 --- a/src/components/SasquatchGuide.tsx +++ b/src/components/SasquatchGuide.tsx @@ -1279,14 +1279,16 @@ Instructions: // Height is bounded to the visible viewport (dvh) with safe-area insets so the // header/close button never slide off the top of the screen behind the status bar. 'bottom-[4.5rem] left-2 w-[min(calc(100vw-5rem),340px)]', - // Desktop: compact panel bottom-RIGHT (matches the bubble, clears the footer) - 'md:bottom-6 md:left-auto md:right-6 md:w-[360px]', + // Desktop: panel opens on the LEFT (as before). Sits higher than the + // footer (md:bottom-16) so it never covers the "Made with..." row. + 'md:bottom-16 md:left-4 md:right-auto md:w-[360px]', isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-3 pointer-events-none' )} style={{ - // Cap the panel so it can never exceed the space between the safe-area top - // and its own bottom offset (5rem ≈ bottom offset + a little breathing room). - maxHeight: 'calc(100dvh - env(safe-area-inset-top, 0px) - 6rem)', + // Cap the panel height so it clears both its bottom offset AND the top + // header/nav — it should never slide under the menu bar or off-screen. + // Content scrolls internally when it's taller than this. + maxHeight: 'calc(100dvh - env(safe-area-inset-top, 0px) - 9rem)', }} > {/* Jungle/dark card */}