Time input field cuts AM/PM text due to short width

[alejo4373]

The default width for the time input field when showTimeInput=true is currently set to 85px in the src seen here which cuts the AM/PM text as seen in the screenshots below.

Screenshots

Firefox: 81.0.2 (64-bit)

Chrome: Version 88.0.4324.96 (Official Build) (x86_64)

To Reproduce

1. Go to https://reactdatepicker.com/#example-input-time
2. Click on the Date Picker
3. Inspect the time input and compare to the screenshots above

Expected behavior
Input field displays all its content without cutting out any of its text.

I would suggest removing the 85px and let the browser decide the width necessary. This is what I'm doing in my override of the CSS using inline styles with

<style>{`
  .react-datepicker__input-time-container 
  .react-datepicker-time__input-container 
  .react-datepicker-time__input input {                    
     width: unset
  }
`}</style>

I am wondering if anyone else is experiencing this issue.

Desktop

• OS: macOS Catalina, Version 10.15.7
• Browsers
  • Chrome Version 88.0.4324.96 (Official Build) (x86_64)
  • Firefox 81.0.2 (64-bit)

Additional context

• This seems to affect Firefox and Chrome. Safari V.14.0.1 shows a 24 hour clock so the AM/PM text is never there.
• On mobile(iPhone SE) Chrome and Safari display the native time picker and 85px is more than enough to show all text content + it seems the iPhone has a smaller font-size for inputs.
• This feature/variant was introduced in PR #1591 by @gautam-pahuja

[chopify]

Thank you for the temporary fix. I'm am seeing the same issue after PR #1591

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.