Skip to content

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

Merged
danielroe merged 1 commit into
npmx-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 into
npmx-dev:mainfrom
julien-deramond:main-jd-avoid-readme-actions-cropped-visible-focus

Conversation

@julien-deramond

Copy link
Copy Markdown
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 47Screenshot 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 21Screenshot 2026-02-07 at 12 13 15

@vercel

vercelBot commented Feb 7, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentFeb 7, 2026 11:26am
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewFeb 7, 2026 11:26am
npmx-lunariaIgnoredIgnoredFeb 7, 2026 11:26am

Request Review

@codecov

codecovBot commented Feb 7, 2026

Copy link
Copy Markdown

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

coderabbitaiBot commented Feb 7, 2026

Copy link
Copy Markdown
Contributor
📝 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 nameStatusExplanation
Description check✅ PassedThe 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 queueFeb 7, 2026
Merged via the queue into npmx-dev:main with commit fb225feFeb 7, 2026
17 checks passed
Sign up for freeto 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

@julien-deramond@danielroe