Kibana: [Uptime ui] datepicker is not aligned appropriately

[katrin-freihofner]

Kibana version:
8.0.0

Elasticsearch version:
8.0.0

Browser version:
75.0.3770.100 (Official Build) (64-bit)

Browser OS version:
Mac

Original install method (e.g. download page, yum, from source, etc.):
Using the 8.0.0-SNAPSHOT

Describe the bug:
The datepicker is not aligned with the filter fields underneath, it is 8px off (this is also an issue in other views, APM for example).

Expected behavior:
The datepicker should be right aligned with the filter fields.

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/uptime

[justinkambic]

Hm.. what do we think the priority is here? I think the right-alignment is a larger concern. Aligning the left side of the picker with the filter list/bar may not be something we can easily control as these buttons are subject to change and the styling of those dropdowns and the bar is done internally at the component level. It's a little out of my depth to know what to do in that case.

[katrin-freihofner]

@justinkambic I agree, the lines in the screenshot are misleading - I only intend to fix the alignment on the right.

[shahzad31]

i am going to pick this up and will fix the right alignment for datepicker and refresh button

[shahzad31]

It turns out there is an extra gutter being added to EuiSuperDatePicker , it's value is small, so it adds an extra margin to the Eui component, and there is no way to override it.

There are two ways we can resolve this, we can add extra margin to rest of the layouts in the page to have an aligned look, or otherwise we can add a prop into EuiSuperDatePicker to override it's margins for this use case.

i am still investigating it if there can be a more simplified way to resolve this.

[justinkambic]

@shahzad31 thanks for picking this up - if there's anything I can do to help out please do LMK.

[shahzad31]

I have opened an issue in EUI for this https://github.com/elastic/eui/issues/2225