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

[lazy-sunshine]

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

[rugk]

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

[Fanksies]

I decided to do my own take on this and noticed too late that someone had already attempted it before (I'm new to contributing to open source projects) I've submitted my own PR on this issue nonetheless for your consideration.

[rugk]

@Fanksies Sorry for the late reply, as far as I see in #226 I was not really satisfied with the solution to merge it yet.
So your solution may fix it differently and thus be better than my one, here? I just see your commit Fanksies@9b83e84, but no PR.

However, if you want, feel free to also look at the other PR.

IÄm still seeking a "proper" solution for this issue.

[no1atall]

If this is still open to work on, I would like to give this a shot please.

[rugk]

Sure, feel free to give it a try, @no1atall, I'll assign you. Please have a look at the previous (unsuccessful) tries, as you can see this is likely a tricky CSS task here…

[Hamjaster]

Is this issue still open, I'd fix it, but want a bit explanation how when the error message is displayed :)

[rugk]

@Hamjaster Yeah, sure, you can take it. And thanks a lot in advance. If you have any issues or questions, e.g. how to implement a certain thing or how a thing works, feel free to ask. Also note GitHub's help can help on topics on how to use GitHub and e.g. how to create and update pull requests.

As for how it should look, the initial link redirects now, but you can find it in the archive: https://web.archive.org/web/20220519062052/https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines
Scroll down to “Message on Multiple Lines” if needed. Also see the text that is written as an explanation. IIRC this part is quite hard to implement with the current (flexbox-based) design:

The call-to-action-buttons break into a new line below the message and are aligned to the start of the message.

BTW a JSFiddle or similar using the same CSS as we use, would also be very helpful for a start, as you can see there were many attempts at this one, but the CSS is not actually simple. Maybe one would need to switch to CSS grid? That could be a solution.
Also check out the recent PR #306 to see whether you could take that up or use as a basis already, and if it already solves the issue, you could just continue/take-over the PR.