EuiDatePicker popover does not handle screen edge in Firefox

[pickypg]

I was attempting to use an EuiDatePickerRange within an EuiFlyout and I ran into this when using the end date in Firefox:

The major problem is ultimately caused by me setting the Flyout to maxWidth={0}. In Firefox, it its too narrow for the date picker and when it pops open, the horizontal scroll bar appears, but it does not move. If you click on the scroll bar to scroll to see it, then the popover disappears.

In Chrome / Chromium Edge, it appears to handle this by adding a horizontal scroll bar and automatically scrolling to the right.

Code Example

  render() {
    const now = moment();
    
    return (
      <EuiFlyout
        maxWidth={0}
        onClose={() => {}}
        ownFocus
        size='s'
      >
        <EuiFlyoutHeader hasBorder aria-labelledby='person-a'>
          <EuiTitle size='m'>
            <h2 id='person-a'>Person A</h2>
          </EuiTitle>
        </EuiFlyoutHeader>
        <EuiFlyoutBody>
          <EuiForm>
            <EuiFormRow
              label='Ranges'
            >
              <EuiDatePickerRange
                startDateControl={
                  <EuiDatePicker
                    aria-label="Start date"
                    minDate={now}
                    onChange={(startDate) => {}}
                    selected={now}
                  />
                }
                endDateControl={
                  <EuiDatePicker
                    aria-label="End date"
                    minDate={now}
                    onChange={(endDate) => {}}
                    selected={now}
                  />
                }
              />
            </EuiFormRow>
          </EuiForm>
        </EuiFlyoutBody>
        <EuiFlyoutFooter>
          <EuiFlexGroup justifyContent='spaceBetween'>
            <EuiFlexItem grow={false}>
              <EuiButtonEmpty
                flush='left'
                iconType='cross'
                onClick={() => {}}
              >
                Cancel
              </EuiButtonEmpty>
            </EuiFlexItem>
            <EuiFlexItem grow={false}>
              <EuiButton
                fill
                iconType='save'
                onClick={() => {}}
              >
                Save
              </EuiButton>
            </EuiFlexItem>
          </EuiFlexGroup>
        </EuiFlyoutFooter>
      </EuiFlyout>
    );
  }