Unified Search bad intractability on narrow screen

[nickofthyme]

Kibana version:

8.13, latest

Describe the bug:

When using an app such as discover with unified search, when the query bar width is overly confided such that the time picker is pushed to a new row the UI unnecessarily jumps around a lot. Main contributing factors of this are...

• Narrow browser window, especially in serverless with the side nav open.
• A wide time picker display (i.e. both start and end are absolute times)

The problem is that in this state where the time picker is pushed to a second row, as soon as the user clicks the query bar, the timepicker width is collapsed causing the time picker to move back to the first row and jumps all the content up with it to remove the now empty row. Then blurring the query bar does the reverse and jumps the content down.

Expected behavior:

Ideally we prevent any collapsing of the time picker once it's pushed to the second row, as there's no longer a need to make more room for the query bar in this state, in fact doing so currently actually reduces the query bar width.

Screenshots (if relevant):

Screen.Recording.2024-02-15.at.10.37.40.AM.mp4

Notice when focusing and blurring the query bar how the entire page contents jump up and down.

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[stratoula]

I am changing this to enhancement because:

• it is something we know and we had agreed to keep it like that
• responsiveness is not great in kibana in general
• there are some conversations about redesign so I think it will be good to deal with responsiveness after the redesign

[nickofthyme]

I agree, this just caused a failure in the functional tests with the shift causing unnecessary chart rerenders. Just wanted to make note of this for future enhancement.

[stratoula]

How this causes rerenders to the FT? Are we resizing or something? 🤔

[nickofthyme]

How this causes rerenders to the FT? Are we resizing or something? 🤔

In the serverless environment with the side nav open making discover narrower, you have the TimePicker pushed to the bottom. In one functional test, the test focuses the query bar then blurs it for some assertion. This blurring of the query bar causes the collapse of the time picker and the chart container fills the space momentarily and causes the chart to render 3 additional times. To be clear this is not perceptible but the tests are asserting render count, which caused the error, see #176872 (comment).

[stratoula]

Yes thanx Nick, it is clear now :)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)