[EuiCallOut] Use resize observer instead of container queries

[mgadewoll]

Summary

This PR is a follow-up to #9705, which updated EuiCallOut to use container queries to handle the responsive behavior of the action elements.

Because EuiCallOut is a somewhat general component that can be placed in different layout contexts, it might be placed in containers that have no intrinsic width which would lead the container query to collapse as it has no dimensions to align to (e.g. absolute positioned containers - like <EuiPopover> - or flex layouts with no width basis - like <EuiFlexItem grow={false}>

To prevent issues because of this, we instead use a minimal resize observer implementation that sets a data-layout attribute which CSS can target accordingly instead of the container query.

API Changes

⚪ No API changes

Screenshots

Before	After

For Callouts in general there no visual changes expected.

Before	After

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None - internal change only (pre-rollout)

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• verify that the responsive behavior (storybook) behaves the same as with the previous container-query implementation (storybook)

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 662e9e3

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 662e9e3
• Documentation website
• Storybook

cc @mgadewoll

[acstll]

I'll be reviewing this later today!

[acstll]

🟢 Container responsiveness works as expected. I know we discussed this offline but I don't think it hurts to express my disappointment with container queries again 🫠 (let's try and make some time to investigate in this regard in the near future).

I left a suggestion to simplify the useLayoutObserver hook for your consideration (I tested it locally). Also, I think it'd be worth considering adding a small unit test for the hook.

[acstll]

[non-blocking] I have a suggestion for simplifying refs by combining them here and removing the logic from the hook (follow-up comment)

the import for useCombinedRefs from services is missing in this diff, the suggestion below is for illustrating, not directly committing 😛

Suggested change

	const panelRef = useLayoutObserver(size, ref);
	const layoutRef = useLayoutObserver(size);
	const panelRef = useCombinedRefs([layoutRef, ref]);

[acstll]

following up on the previous comment, by passing no ref you can remove the useCallback bit:

Suggested change

	export const useLayoutObserver = (
	size: EuiCallOutSize,
	ref: React.ForwardedRef<HTMLDivElement>
	): ((node: HTMLDivElement | null) => void) => {
	const elementRef = useRef<HTMLDivElement | null>(null);
	const forwardedRefRef = useRef(ref);
	forwardedRefRef.current = ref;
	const panelRef = useCallback((node: HTMLDivElement | null) => {
	elementRef.current = node;
	const fRef = forwardedRefRef.current;
	if (typeof fRef === 'function') {
	fRef(node);
	} else if (fRef) {
	(fRef as React.MutableRefObject<HTMLDivElement | null>).current = node;
	}
	}, []);
	export const useLayoutObserver = (
	size: EuiCallOutSize
	): RefObject<HTMLDivElement | null> => {
	const elementRef = useRef<HTMLDivElement | null>(null);

[acstll]

if you apply the above:

Suggested change

	return panelRef;
	return elementRef;