[IllustratedMessage]: Layout problems

[ej612]

Bug Description

In v1.23.1, there seems to be something wrong with the IllustratedMessage:

size={IllustrationMessageSize.Dot} doesn't seem to work right, either:

Isolated Example

• Open this StackBlitz template made by the @ui5/webcomponents-react team
• Paste this code into App.tsx:

import {
  Dialog,
  IllustratedMessage,
  IllustrationMessageSize,
} from '@ui5/webcomponents-react';
import '@ui5/webcomponents-fiori/dist/illustrations/EmptyList.js';

function App() {
  return (
    <Dialog
      open={true}
      resizable={true}
      draggable={true}
      style={{
        height: '600px',
      }}
    >
      <IllustratedMessage
        name="EmptyList"
        titleText={'Your selection is empty.'}
        subtitleText={'Select items from the list.'}
        size={IllustrationMessageSize.Spot}
      />
    </Dialog>
  );
}

export default App;

Possibly related to #5852.

UI5 Web Components Version

1.23.1

Browser

Chrome

[ej612]

Side note: The story 'With A Dialog' doesn't work in Firefox. When I click on the button, nothing happens and I have this error in the console:

[ilhan007]

Hi @SAP/ui5-webcomponents-topic-p could you follow up.
related issue #5852

[plamenivanov91]

Side note: The story 'With A Dialog' doesn't work in Firefox. When I click on the button, nothing happens and I have this error in the console:

Hello @ej612 ,

The sample works perfectly fine on the latest Firefox browser

I'll look into the rest of the issue now.

Regards,
Plamen Ivanov

[ej612]

Hi @plamenivanov91, thanks a lot for the fix!

The sample works perfectly fine on the latest Firefox browser

I confirm, same here. No idea what the issue was.