fix: display images on top of other elements in README

[DDeenis]

Resolves #1006

Note: I noticed that the other PR has kind of stalled, so decided to try and fix that myself. Feel free to close this one if it is considered a bad OSS practice.

The change is to display the image on top of other elements with z-index, npm does the same

npmx (fixed)

npm

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Error		Feb 5, 2026 8:16pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 8:16pm
npmx-lunaria	Ignored		Feb 5, 2026 8:16pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request addresses styling issues with embedded media (particularly YouTube videos) in the README component. CSS isolation has been applied to the README container to prevent z-index conflicts, and positioning with z-index properties have been added to the main readme image blocks to establish proper stacking context. These are purely visual and layout adjustments with no changes to public APIs or semantic structure.

Possibly related PRs

• PR #886: Modifies CSS in app/components/Readme.vue affecting the styling and behaviour of media elements (images and videos) within the README component.
• PR #881: Updates CSS in app/components/Readme.vue to address layout spacing and z-index stacking context of README content.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly references issue #1006 and describes the fix for displaying images on top using z-index, directly relating to the changeset.
Linked Issues check	✅ Passed	The PR implements CSS changes (z-index and positioning) to address the YouTube embed styling issue from #1006, aligning the visual presentation with GitHub and npm standards.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the README component's visual styling through CSS modifications in Readme.vue, directly addressing the linked issue requirements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[trueberryless]

LGTM 🎉

I think we could close the other PR but add the author as a contributor here 👍

[iiio2]

Cool.