Skip to content

fix: prevent Chrome Android date input value clipping - #2037

Merged
graphieros merged 1 commit into
npmx-dev:mainfrom
lukewarlow:date-input-clipped-value-android
Mar 12, 2026
Merged

fix: prevent Chrome Android date input value clipping#2037
graphieros merged 1 commit into
npmx-dev:mainfrom
lukewarlow:date-input-clipped-value-android

Conversation

@lukewarlow

Copy link
Copy Markdown
Contributor

🔗 Linked issue

Fixes: #1931

🧭 Context

There's a bug where the date input value reserves margin right even when it doesn't need to, this leads to the value getting clipped.

We override the margin on the value element to fix that.

📚 Description

Set margin-inline to 4px on the ::-webkit-date-and-time-value pseudo-element which is what holds the date input value on mobile for WebKit browsers.

There's a bug where the date input value reserves margin right even when it doesn't need to, this leads to the value getting clipped.
We override the margin to fix that.
Fixes: npmx-dev#1931
@vercel

vercelBot commented Mar 12, 2026

Copy link
Copy Markdown
Contributor

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

ProjectDeploymentActionsUpdated (UTC)
npmx.devReadyReadyPreview, CommentMar 12, 2026 0:48am
2 Skipped Deployments
ProjectDeploymentActionsUpdated (UTC)
docs.npmx.devIgnoredIgnoredPreviewMar 12, 2026 0:48am
npmx-lunariaIgnoredIgnoredMar 12, 2026 0:48am

Request Review

@lukewarlowlukewarlow changed the title Fix TrendsChart date input value getting clipped on chrome androidfix: TrendsChart date input value getting clipped on chrome androidMar 12, 2026
@codecov

codecovBot commented Mar 12, 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

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d375baad-f617-44c1-bb5f-31613c4b9e33

📥 Commits

Reviewing files that changed from the base of the PR and between d3cfce5 and c3a573b.

📒 Files selected for processing (1)
  • app/components/Package/TrendsChart.vue

📝 Walkthrough

Walkthrough

A CSS styling rule is added to the TrendsChart component's style block targeting the webkit date-time-value pseudo-element for input elements. The rule applies a 4-pixel margin-inline property to address visual clipping of date input values observed on Chrome Android. The change is purely stylistic with no modifications to component logic or data flow.

Suggested reviewers

  • danielroe
  • 43081j
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check nameStatusExplanation
Description check✅ PassedThe PR description clearly explains the bug, the CSS fix applied, and references the linked issue #1931.
Linked Issues check✅ PassedThe PR successfully addresses issue #1931 by implementing a CSS-based fix that prevents date input value clipping on WebKit browsers.
Out of Scope Changes check✅ PassedThe changes are limited to a single CSS rule targeting the date input styling, directly addressing the clipping issue mentioned in #1931.

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

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@graphierosgraphieros changed the title fix: TrendsChart date input value getting clipped on chrome androidfix: prevent Chrome Android date input value clippingMar 12, 2026

@graphierosgraphieros left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfect

@graphieros
graphieros added this pull request to the merge queueMar 12, 2026
Merged via the queue into npmx-dev:main with commit ad3ea72Mar 12, 2026
20 of 22 checks passed
@github-actionsgithub-actionsBot mentioned this pull request Mar 12, 2026
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.

Date input value gets clipped on Chrome Android

2 participants

@lukewarlow@graphieros