[Lens] Configuration Flyout Issues on Small Viewport Sizes

[MichaelMarcialis]

Kibana version:
8.0.0

Elasticsearch version:
8.0.0-SNAPSHOT

Server OS version:
macOS 10.14.6

Browser version:
Chrome 91.0.4472.114

Browser OS version:
macOS 10.14.6

Original install method (e.g. download page, yum, from source, etc.):
From source

Describe the bug:
At very small viewport sizes, EUI flyouts are intended to cover over the entirety of the page contents (except for the top stacked headers). The Lens configuration flyouts (which use the EUI flyout classes/styles) appear to have two issues occurring at these very small viewport sizes:

1. The KQL search input z-indexing appears to be placing it above the flyout, when it should be below and overlaid by the flyout.
2. The right edge of the flyout is not extending to the right edge of the viewport.

Steps to reproduce:

1. Open a Lens visualization.
2. Click any chart dimension item to trigger the appearance of a configuration flyout.
3. Shrink the browser viewport width to trigger the smallest breakpoint layout.

Expected behavior:
When Lens configuration flyouts are opened at small viewport sizes, the KQL search input should appear below and overlaid by the flyout and the right edge of the flyout should extend to the right edge of the viewport.

Screenshots (if relevant):

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[mbondyra]

@MichaelMarcialis this comes from this CSS:

I could overwrite it, but do you know why it is there? 🤔

[MichaelMarcialis]

@mbondyra: After looking at this issue again, I believe all EuiFlyout components have this maximum width applied by default. The issue here appears to be threefold:

1. The EuiFlyout is being positioned to the left edge of the viewport, when it should actually be at the right edge of the viewport. Looks like this is happening because of a left: 0; style being applied to the .lnsDimensionContainer class. At larger viewport sizes this style works, because the flyout is being overriden to have position: absolute;, but at smaller viewport sizes it has the default position: fixed;. This change in positioning styles needs to be accounted for.

2. As mentioned above,EuiFlyout components do have a default maximum width applied, but in Lens' case I think it makes sense to remove it (as seeing a small sliver of content underneath the flyout doesn't have any usability benefits at small viewport sizes in this app's case). As such, I think we can use a prop of maxWidth={false} on the EuiFlyout component to allow it to fill 100% of the viewport width.

3. The search bar showing above looks like a simple (hopefully) z-indexing issue. Increasing the z-index of the flyout (or reducing the z-index of the search bar) to accommodate appears to fix it.