rc-time-picker not displaying correctly on mobile

Question

  <div>
    <Button onClick={() => this.setState({ show: true })}>Open</Button>
    <Modal
      show={this.state.show}
      onHide={() => this.setState({ show: false })}
      animation
    >
      <Modal.Header closeButton>
        <Modal.Title>Modal</Modal.Title>
      </Modal.Header>

      <Modal.Body>
        <TimePicker open getPopupContainer={triggerNode => triggerNode.parentNode}/>
        {[...Array(11).keys()].map(() => <div>Scroll down</div>)}
      </Modal.Body>
    </Modal>
  </div>

I'm using the rc-time-picker.

It shows correctly on desktop, even with window minimized.

But on mobile it looks like this (the dropdown is to the left of the input box):

Any idea what's wrong?

Answer 1

A similar fix to Artems, I set the border of the offending input to 0px. This will get rid of it cosmetically for any size phones.

Answer 2

I hacked it by reduce width of input, but i pick up sizes many times.