[Discover Flyout] It is difficult to click on the scroll bar with the new flyout

[alexmarhaba]

Tested on edge-lite &_a=(columns:!(),dataSource:(dataViewId:'logs-*',type:dataView),filters:!(),hideChart:!f,interval:auto,query:(language:kuery,query:''),sort:!(!('@timestamp',desc))))

Problem description: When the new document flyout is open, it is difficult to click on the scroll bar because the command is superseded by the expand / rectract flyout interaction:

Proposal:

• Ensure that when the user hovers the scroll bar, the scroll is in focus and they can click to change the scroll location.

cc @andreadelrio

[elasticmachine]

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

[kertal]

Hmm, @lukasolson @davismcphee , is there something we can do here? Because we're AFAIK we're just using EUI functionality here?

[davismcphee]

@kertal It is built in EUI functionality, but the overlap is caused by our layout. It only seems to happen when the resize handle is focused though, since the wider blue border goes away when unfocused, so I'm not sure it's a significant issue. Probably worth getting input from @andreadelrio anyway to be sure.

[alexmarhaba]

@davismcphee Just tested it again and the problem persists regardless of whether resize handle is focused or not. There is a very small area that needs to be targeted for the click-to-scroll to work. See screencast below.

https://github.com/user-attachments/assets/13363512-8ef5-439f-a720-a9b88f097c9a

[davismcphee]

@alexmarhaba Thanks for confirming! It looks like the impact is dependent on how the browser handles scrollbars. I originally tested in Edge which has wider scrollbars, so I wasn't encountering it, but testing again now in Safari, I'm seeing the same issue as you.

In that case @kertal we will have to do something about this. The two options that come to mind are overriding the EUI styles to make the resize handle thinner so it doesn't interfere, or adding additional padding to the right of the data grid. We could see if there's any z-index magic we could use to improve it too, but I doubt it. Would still be valuable to get design input from @andreadelrio or @MichaelMarcialis about which approach might be best.

[MichaelMarcialis]

FWIW, I agree with @davismcphee's assessment. I don't think this behavior can be corrected with a z-index solution alone, as one element will always be interfering with the other regardless. I think reducing the width from the left-half of the resizable button would probably be the best approach, but I will ultimately defer to @andreadelrio.

[kertal]

@davismcphee before we overwrite the EUI styles, could this be a usecase not only for Discover, so it should be done on EUI side?

[davismcphee]

@kertal Do you mean something like requesting a prop from EUI for the resizable flyout to reduce the resize handle shadow width?

[kertal]

@davismcphee yes, something like this, dear @elastic/eui-team do you think something like this would make sense, the problem surfaced in Discover, but there could be more use cases

[kertal]

Created an issue for it, it should be resolved on Eui level https://github.com/elastic/eui/issues/7988, setting to blocked for now