Skip to content

Conversation

@RYGRIT
Copy link
Contributor

@RYGRIT RYGRIT commented Feb 9, 2026

related: #1244

Currently, the "Columns" button text in the table view toolbar may cause layout overflow on small screens, especially in languages ​​with longer translated text.

My proposed solution is to display it as an icon button while ensuring that screen readers can still access the corresponding content.

What are your thoughts on this? If everyone agrees with my suggestion, I will proceed with refining this PR.

before ac465657-ed1b-4f3b-bb0d-7cc0abab0b64 771c943b-9151-478b-ad24-08a32c364501 6782fff9-990e-4208-9650-a927ba578d8b
after image

@vercel
Copy link

vercel bot commented Feb 9, 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 9, 2026 3:51pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 9, 2026 3:51pm
npmx-lunaria Ignored Ignored Feb 9, 2026 3:51pm

Request Review

@codecov
Copy link

codecov bot commented Feb 9, 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 9, 2026

📝 Walkthrough

Walkthrough

The ColumnPicker.vue component receives a minor accessibility update where the ButtonBase label text is wrapped in a span element with responsive visibility classes. The label remains hidden on small viewports (sr-only) whilst becoming visible on larger viewports (sm:not-sr-only). The translation key is unchanged and no modifications are made to control flow or event handling logic.

Suggested labels

front

Suggested reviewers

  • danielroe
  • serhalp
🚥 Pre-merge checks | ✅ 1
✅ Passed checks (1 passed)
Check name Status Explanation
Description check ✅ Passed The pull request description clearly addresses the changeset, discussing the Columns button overflow issue on small screens and the icon-only solution with accessibility preservation.

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

No actionable comments were generated in the recent review. 🎉


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

@RYGRIT RYGRIT changed the title fix(ui): hide text on mobile devices to prevent inconsistent display on small screens fix(ui): hide text on mobile devices to prevent inconsistent display on small screens (need discussion) Feb 10, 2026
@RYGRIT RYGRIT changed the title fix(ui): hide text on mobile devices to prevent inconsistent display on small screens (need discussion) [need discussion]fix(ui): hide text on mobile devices to prevent inconsistent display on small screens Feb 10, 2026
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.

1 participant