Date input is clipped in custom time selection

[bobrik]

Describe the bug

Date input is not fully visible (Macbook Pro 13", maximized window):

To Reproduce

Steps to reproduce the behavior:

1. Set date format to ISO8601:

2. Open Jaeger UI
3. Pick custom time range

Expected behavior

Date can be entered without issues.

Version (please complete the following information):

• Jaeger version: 1.29, jaeger-ui build from the tip

Additional context

I think we can use input with type="datetime-local" rather than separate inputs for date and time. This also gives a nice picker, at least in Chrome:

I'm happy to open a PR if you agree.

[albertteoh]

Thanks for the proposal @bobrik. I like the fact that date and time are together in one input to save real estate and remove the need to fill out another input just for time.

However, it looks like it's not supported in IE, and perhaps why it was designed that way in Jaeger UI, because the workarounds I've read are to provide separate date and time inputs.

[bobrik]

Do we need to care about IE? Microsoft replaced it with Chromium based Edge 7 years ago and new feature development for IE stopped 6 years ago.

[yurishkuro]

I don't have strong opinion on Chromium/IE, but with the current implementation it looks like there is enough space to fit the ISO date, but something is slightly off with the style sheet. So the minimal fix would be to just fix the stylesheet.

[yurishkuro]

btw, I am not digging the s/s of the chromium date picker, it looks very unintuitive - wth are the two right columns?

[bobrik]

Switching from ant-col-12 for both data and time to ant-col-14 for date and ant-col-8 for time also works:

Should I open a PR to do this instead of full datetime-local picker?

Using text input type rather than date also removes the clipping:

I think Crome adds a rather wide overlay for the date icon, and it has nothing to do with Jaeger stylesheets specifically:

[yurishkuro]

Should I open a PR to do this instead of full datetime-local picker?

yes, let's try that first

[bobrik]

#867 takes care of this.