fix(docs): restore media centering and full-width intro image

[waleedlatif1]

Summary

• Replace the layout-breaking <button class="block w-full text-left"> lightbox wrapper in Image/Video with <button class="contents"> so parent layout (e.g. flex justify-center) works again; focus/hover styling moves onto the child via group-*
• Restore center alignment for the RSS image (which had become left-aligned)
• Match the introduction page's intro image width to the videos below it (was 700px intrinsic, now stretches to the article column)

Type of Change

• Bug fix

Testing

Tested manually — measured both pages with Playwright before/after to confirm the RSS image re-centers and the intro image matches the videos' column width (648px at 1280×900, 808px at 1440×900). Lightbox click + keyboard activation still works.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	May 12, 2026 9:23pm

[cursor]

PR Summary

Low Risk
Low risk: this is a small, docs-only styling/layout change that adjusts wrapper markup/classes around lightboxed media.

Overview
Updates the docs Image and Video lightbox trigger wrapper from a layout-affecting block button to button.contents, moving hover/click affordance onto the media via group-* and adding cursor-pointer on the media elements.

Adjusts the introduction page hero image container/classes so the image is full-width within the article column and doesn’t break centering/overflow styling.

^{Reviewed by Cursor Bugbot for commit 0215d55. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes two visual regressions in the docs site: the <button> lightbox wrapper was using block w-full which broke parent flex/grid layouts (e.g. centering the RSS feed image), and the introduction page's hero image was constrained to 700 px intrinsic width instead of stretching to the full article column like the videos below it.

• image.tsx / video.tsx: the lightbox <button> class is changed from block w-full cursor-pointer rounded-xl p-0 text-left to contents, so it no longer generates a box that overrides the parent layout. cursor-pointer is moved onto the child <NextImage>/<video> element, which still has a rendered box and displays the pointer cursor correctly.
• introduction/index.mdx: the intro image wrapper is updated from flex justify-center to mx-auto w-full overflow-hidden rounded-lg my-6 with className=\"w-full\" on the <Image>, making it visually consistent with the surrounding <Video> blocks.

Confidence Score: 5/5

Targeted CSS/layout-only fix with no logic changes; safe to merge.

All three changed files touch only Tailwind class strings and MDX markup. The display: contents pattern is well-understood, cursor-pointer is correctly relocated to the child element, and the intro image wrapper aligns with the already-established video wrapper style. No data paths, no auth, no API surface is touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/docs/components/ui/image.tsx	Button wrapper class changed from block w-full to contents; cursor-pointer moved onto the <NextImage> child so the pointer cursor still renders correctly via the child's box.
apps/docs/components/ui/video.tsx	Same contents wrapper change as image.tsx; cursor-pointer moved onto the <video> child, keeping hover affordance intact.
apps/docs/content/docs/en/introduction/index.mdx	Intro image wrapper changed from flex justify-center to mx-auto w-full overflow-hidden rounded-lg my-6 with className="w-full" on the Image, matching the layout style used by all Video blocks on the same page.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Image / Video component\n(enableLightbox=true)"] --> B["button class='group contents'\n(no rendered box)"]
    B --> C["NextImage / video\nclass='cursor-pointer group-hover:opacity-95'"]
    C -->|"user clicks"| D["openLightbox()"]
    D --> E["Lightbox isOpen=true"]
    C -->|"pointer hover"| F["group-hover opacity applied\nvia child's own box"]
    G["Parent layout\ne.g. flex justify-center\nmx-auto w-full"] -->|"button has no box\nparent layout applies directly to child"| C

Loading

_{Reviews (4): Last reviewed commit: "fix(docs): drop focus ring on lightbox m..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit 0215d55. Configure here.}