Sticky KQL toolbar broken in Serverless

[semd]

Summary

The KQL toolbar is not sticky anymore in serverless.

Expected behavior

(in ESS)

sticky_bar_working.mov

Actual behavior

(in Serverless)

sticky_bar_not_working.mov

[elasticmachine]

Pinging @elastic/appex-sharedux (Team:SharedUX)

[semd]

The cause of the problem may come from the HeaderActionMenu. When the position: sticky style is removed from it, the internal toolbar becomes sticky again.

sticky_bar_broken_possible_cause.mov

[Dosant]

I took a quick look, the securitySolutionStickyKQL just sticks to top: var(--euiFixedHeadersOffset,0);

I think we will have to adjust it for serverless to account for HeaderActionMenu and it should be dynamic depending on if the sub-header is present

top: var(--euiFixedHeadersOffset + headerActionMenuHeight,0);

I am not sure if I am missing a simpler way

[semd]

@Dosant Your solution works 👏
But it implies that we'll have to set a different top distance in serverless, and doing a special case in the CSS code is not ideal.

If we were to go with this solution, would it be possible for sharedUX to provide an offset constant or something, that we can use on both environments (serverless and non-serverless) without having to do a special case? it would be 57px in serverless and 0 in ess.

[Dosant]

@semd, yes, I agree, we should expose something, I'll look into it.
note: this constant should also account for the top banner https://www.elastic.co/guide/en/kibana/current/banners-settings-kb.html

[semd]

@Dosant Using the ESS (stateful) layout, we do not need to do any position changes when the top banner is present. Could it be that the serverless layout is doing something else differently that is causing all these positioning issues?

[Dosant]

@Dosant Using the ESS (stateful) layout, we do not need to do any position changes when the top banner is present. Could it be that the serverless layout is doing something else differently that is causing all these positioning issues?

Yes, the variable you're using changes depending on if the banner is present.
After the fix, serverless should work in a similar way, this was mostly a note to myself