create an opegnraph image using next og
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.
tutorial pip gets super condensed/doesnt all fit (next step is cut off at the bottom).
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.
seems like y-padding/gap is lost in tutorial (and maybe more). nos pacing between list items and a black border around the background.
how can we ensure that all the UI widgets look good in and out of PiP mode?