Incorrect display of messages on multiple lines

[rugk]

https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines

Currently the icon is e.g. shown in the middle anyway.

[rugk]

Also the action button must be wrapped…

[anmol5varma]

I can help with this but would need more context.

[rugk]

Okay, thanks. You're right this needs a little more information.

STR

Trigger a long message, e.g. like this:

1. Go to the settings.
2. Set quite similar colors for background and QR code color, i.e. e.g. #A0A0C1 and #FFFFFF.

What happens

This error message is shown:

What should happen

As per the linked doc in such a case the icon should be aligned at the top and not centered.
Also, the action button should possibly(!) be wrapped on a new line (if it makes sense – in that example it probably makes, but this has to be seen whether it looks good.)

Proposed solution

This mostly needs some CSS quirks.
One pointer would the common.css file: https://github.com/rugk/offline-qr-code/blob/master/src/common/common.css

@rugk Is this issue open for me to work on ? Thanks

[rugk]

Of course, feel free to take it on. Thanks. 😃