Skip to content

fix(ui): avoid README actions to be cropped with visible focus#1144

Merged
danielroe merged 1 commit intonpmx-dev:mainfrom
julien-deramond:main-jd-avoid-readme-actions-cropped-visible-focus
Feb 7, 2026
Merged

fix(ui): avoid README actions to be cropped with visible focus#1144
danielroe merged 1 commit intonpmx-dev:mainfrom
julien-deramond:main-jd-avoid-readme-actions-cropped-visible-focus

Conversation

@julien-deramond
Copy link
Contributor

Go to https://npmx.dev/package/nuxt, and focus README actions with your keyboard. You’ll observe that the focus ring is cropped:

Screenshot 2026-02-07 at 12 13 47 Screenshot 2026-02-07 at 12 13 39

This is due to the entire README area having an overflow-x: hidden. I suppose this is there to avoid README content to overflow in the page, so I’ve isolated this CSS rule to target only the real README content of this <div>, letting the overflow possible for the README actions bar, which gives the following rendering.

Screenshot 2026-02-07 at 12 13 21 Screenshot 2026-02-07 at 12 13 15

@vercel
Copy link

vercel bot commented Feb 7, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Feb 7, 2026 11:26am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 7, 2026 11:26am
npmx-lunaria Ignored Ignored Feb 7, 2026 11:26am

Request Review

@codecov
Copy link

codecov bot commented Feb 7, 2026

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!

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 7, 2026

📝 Walkthrough

Walkthrough

The pull request modifies the CSS in app/pages/package/[[org]]/[name].vue. It adds .area-readme > .readme { overflow-x: hidden; } to constrain horizontal overflow, and introduces an extra stray closing brace in the stylesheet. The diff shows three added lines and no deletions. No JavaScript/TypeScript or runtime logic changes.

Possibly related PRs

  • feat: polish colors and indents #1042: Also touches CSS for the package README area in app/pages/package/[[org]]/[name].vue, adjusting README styling and spacing — strong overlap in affected selectors and file.

Suggested reviewers

  • danielroe
  • trueberryless
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description clearly explains the issue (focus ring being cropped on README actions) and the solution (isolating the overflow-x: hidden CSS rule to only the readme content).

✏️ 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.

@danielroe danielroe added this pull request to the merge queue Feb 7, 2026
Merged via the queue into npmx-dev:main with commit fb225fe Feb 7, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants