[APM] EuiEmptyPrompt horizontal layout is not working

[kpatticha]

The issue appears in APM, while in infra it renders as expected
https://eui.elastic.co/#/display/empty-prompt#layout

Current

Expected

While it should be https://eui.elastic.co/#/display/empty-prompt#layout

Found in
apm • public/components/app/infra_overview/infra_tabs/empty_prompt.tsx:
  40        icon={<NoResultsIllustration />}
  41:       layout="horizontal"
  42        title={

apm • public/components/app/service_dashboards/empty_dashboards.tsx:
  38          }
  39:         layout="horizontal"
  40          color="plain"

apm • public/components/app/service_inventory/multi_signal_inventory/table/no_entities_empty_state.tsx:
  54              }
  55:             layout="horizontal"
  56              color="plain"

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[smith]

FYI this seems to be working correctly when it's enabled in hosts:

(I don't think it's the same code, but it displays correctly.)

[kpatticha]

@smith yes, I mentioned that in the description. The horizontal layout seems to be broken only in APM for some reason.

[kpatticha]

I'm going to tackle this one first as the root problem for https://github.com/elastic/observability-dev/issues/3779

[kpatticha]

This one is currently blocked as it's a issue in the EUI.

I talked with them and they will fix it. In the meantime, I'm moving this to backlog.

Why is happening only in APM?
EUI defines breakpoints xs, s, m, l, xl as default theme but APM on Kibana uses an additional breakpoint xxl (file) breaking the media rule which is refined here

ex

@media only screen and (min-width: 992px) and (max-width: 1599px) {
    .css-nuy00t-euiEmptyPrompt__main-horizontal-l-l {
        flex-direction: row-reverse;
    }
}

The functionality of euiBreakpoint in EUI needs to updated on handle breakpoints

[smith]

Thanks @kpatticha! I'll unassign you for now.

[kpatticha]

The fix has been already merged elastic/eui#7935 and I verified the fix locally

closing it