fix(ui5-illustrated-message): prevent media oscillation

[kineticjs]

Fixes: #14125

Problem:
With design="Auto" inside a scrollable container whose width sits just
above the scene/dialog breakpoint (681px), media oscillates endlessly: "scene"
grows the content, a scrollbar appears and steals ~15px of width, so media drops
to "dialog"; the shorter content removes the scrollbar, width grows back, and
"scene" is selected again — forever.

Findings:
Since the scrollbar that appears on resize does not belong to the Illustrated Message
nor to its direct parent container (both do not overflow and the scrollbar comes from
an upper-level container) we cannot directly detect a cause-and-effect relationship
between media change and the further resize that follows.

Thus, the only way to detect it is to monitor the effect of media changes:
We observe if:

1. one media change causes resize that brings another media change
2. the sequence of changes is sufficient to infer a loop rather than a coincidental resize

Solution in more detail:

• Track the steps of a single ongoing media change as {media, width,
  height} fingerprints. When applying a media would reproduce the step before the
  last (an A->B->A circle), settle on the currently applied media instead of
  changing it.
• The history is cleared once a change settles (no further media
  change on resize or after rendering), so a later genuine resize is never
  mistaken for a continuation of the cycle.
• Scoped to design="Auto"; no breakpoint or height-constraint logic changed.

[chriskari]

Hey @kineticjs,

Thanks for picking this up. As this bug fix is quite important for our team's CI pipeline I also took a look at your PR.
I tested the patch with my repro page (2.27.2 dist + this diff, Chromium with classic scrollbars). It fixes the page-load case: no error, the message settles on scene.

It does not fix the resize case though. If the width is changed to 696px afterwards (from 640 or from 760), the message flips between scene and dialog forever, about 30 times per second. No error anymore, but it never settles. This is our case in the Kyma dashboard, where the message sits in a column that is being resized.

What fixed it for me: in handleResize, only clear the history if the current size is not one of the recorded steps.

if (oldMedia === this.media) {
	const w = this.offsetWidth, h = this.offsetHeight;
	if (!this._ongoingMediaChange.some(s => s.width === w && s.height === h)) {
		this._ongoingMediaChange = [];
	}
}

[kineticjs]

Hi @chriskari ,

Thank you very much for the prompt feedback and the help to trace the issue!
The PR is now updated and will be reviewed shortly.

[chriskari]

Hey @kineticjs,
Looks great, thank you for picking this up so quickly!

Best,
Christian ✌️