Spacing issue resolved #4263

[Vivek-Kamboj]

Summary

I have removed "max-width:100%" from this className

This is because we are giving "margin:-4px" and it is creating some margin in right when we put "max-width:100%" but after removing, it is working fine.

Here is the screenshot of before and after the change.
Before:

After:

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Props have proper autodocs
• Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[cla-checker-service]

💚 CLA has been signed

[Vivek-Kamboj]

I have signed the contribution agreement as stated above.
Please review now.

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4406/

[chandlerprall]

Thank you for this PR! We're all currently enjoying some time off for the holidays, and someone will take a look next week!

[elizabetdev]

Hi @Vivek-Kamboj,

Thanks for fixing this bug! 🎉

I added a changelog and tested the changes in different browsers: Edge, Firefox, Chrome, and Safari. Also tested in small screen sizes and your fix works fine.

I also removed the max-width from euiSuperDatePicker__flexWrapper--isAutoRefreshOnly.

I tried to find why the max-width was introduced and I found that it was meant to fix an issue referenced here: #2236 (comment). This fix is no longer needed IMO.

@cchaos, this fix will introduce a small issue in Kibana.

To fix it, we need to move line 76 into .kbnQueryBar__datePickerWrapper-isHidden:

https://github.com/elastic/kibana/blob/6b4e88fae14b4d665082a17ebc6cae3916ad5cb0/src/plugins/data/public/ui/query_string_input/_query_bar.scss#L70-L84

[elizabetdev]

The max-width is now calc(100% + #{$euiSizeS}); that is part of .euiSuperDatePicker__flexWrapper.