From a0c849350204a022b61754fa4f5845c2b5c4f1e2 Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Thu, 27 Aug 2026 16:28:07 +0700 Subject: [PATCH] Sasquatch: open the panel on the LEFT again on desktop - Panel now anchors md:bottom-16 md:left-4 (was bottom-right) so it opens on the left as before, and sits ABOVE the desktop footer so it never covers the "Made with..." row or footer links. - Tightened max-height to clear the top nav too (never slides under the menu). - Bubble stays bottom-right on desktop for discoverability (clear of footer). Co-authored-by: shakespeare.diy --- src/components/SasquatchGuide.tsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) 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 */}