I've created a dynamic OpenGraph image using Next.js OG at /api/og/route.tsx. The image features a dark gradient background matching the site's aesthetic, a teal gradient icon representing the PiP functionality, bold typography with the title and subtitle, and a call-to-action badge at the bottom. The metadata in layout.tsx now includes OpenGraph and Twitter card configurations pointing to this image.

I can see the issue - the PiP container is using height: 100vh which combined with the body padding causes overflow. The content has fixed header and footer sections with a flex layout, but the middle scrollable area needs better height constraints. Let me fix this:

I've fixed the tutorial PiP layout by making three key changes: replaced h-full with min-h-0 on the main container for proper flex behavior, added shrink-0 to the header and footer to prevent them from being compressed, and changed the PiP container height from 100vh to calc(100vh - 2rem) with explicit flex display to account for the body padding. This ensures all tutorial content including the "Next Step" button is visible and scrollable.