Skip to content

fix(ui5-illustrated-message): vertical responsiveness corrected#13795

Open
kineticjs wants to merge 4 commits into
mainfrom
imIssues
Open

fix(ui5-illustrated-message): vertical responsiveness corrected#13795
kineticjs wants to merge 4 commits into
mainfrom
imIssues

Conversation

@kineticjs

@kineticjs kineticjs commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Fixes: 12673

Problem:
When design is Auto, ui5-illustrated-message automatically selects the illustration size (Scene/Dialog/Spot/Dot/Base) by comparing the container width and height with fixed breakpoints. The fixed height thresholds, however, cannot alone reliably determine the correct size because, besides the illustration, the component can also contain a title, subtitle, and actions of arbitrary height.

Solution:
Replace checks against fixed height thresholds with a check of whether the actual content height (illustration + title + subtitle + actions) fits within the container at the current illustration size — decreasing the size if the content overflows.
This also makes the workaround for issue #5852 (where content flickered endlessly between showing and hiding a vertical scrollbar) redundant, since vertical responsiveness now ensures no scrollbar appears in the first place.

@kineticjs kineticjs temporarily deployed to netlify-preview July 7, 2026 16:32 — with GitHub Actions Inactive
@kineticjs kineticjs temporarily deployed to netlify-preview July 7, 2026 16:34 — with GitHub Actions Inactive
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@kineticjs kineticjs temporarily deployed to netlify-preview July 8, 2026 06:47 — with GitHub Actions Inactive
@kineticjs kineticjs temporarily deployed to netlify-preview July 8, 2026 12:19 — with GitHub Actions Inactive
@kineticjs kineticjs marked this pull request as ready for review July 8, 2026 12:45

@NakataCode NakataCode left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two things that are worth checking:


1. Height cache after theme change

Theme changes re-render via renderDeferred without going through _invalidate, so onInvalidation never fires and _contentHeightForMedia isn't cleared. If a larger-font theme caused a downgrade (e.g. "scene" → "dialog"), switching to a smaller-font theme keeps the stale cached height, and _applyMedia will keep rejecting "scene" even though it would now fit. Since _checkHeightConstraints only writes to the cache on overflow, and the downgraded media fits, nothing re-measures until a resize or content change.

2. Height adaptation for fixed (non-Auto) designs

The old code called _adjustHeightToFitContainer() for all fixed designs, which added the fit-content class so the SVG could scale down into small containers. Now the height logic only runs for design === Auto, and the fit-content CSS was removed. So a fixed design="Dialog" in a small container (e.g. 200px) would overflow instead of scaling the illustration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

IllustratedMessage: component does not resize correctly when the height is being changed

2 participants