Notification buttons look odd on wide displays; could be right-aligned

[tofumatt]

See: https://github.com/mozilla/addons-frontend/pull/4149 + https://github.com/mozilla/addons-frontend/pull/4149#pullrequestreview-88637151 for context.

Basically, I think the buttons on notifications could call a bit more attention to themselves and also look a bit nicer were they aligned far away from the text inside the notification instead of right next to the text. My amateur Pixelmator POC is here:

Before

After

Would this be a design change we could make to Photon notifications? Maybe I'm missing the reason to keep them close to the text. 😄

[brassy-]

@tofumatt thank you for the feedback! Message bar is still pretty new as a component, and this kind of feedback are gold for us! <3

Can you make a message bar that doesn't grow as much as the parent-container?

[tofumatt]

We could in some cases… but then it might look a bit strange as it’s taking up less than the width of the container when everything else is full-width. It’d probably look pretty strange as well.

I think in general we'd like to keep the message bar as wide as the parent to draw attention to it as well 😄

[brassy-]

I think in general we'd like to keep the message bar as wide as the parent to draw attention to it as well 😄

yeah, that's the goal!

I'd just like to have all of three to try to get a more inform decision. Align the action always on the left can create weird spacing when the message has multiple-lines.

[brassy-]

Hey @tofumatt, Sorry for replying to you after such a long time. I'm facing a kind of issue with your request; I hope you can maybe help me to solve it from a technical perspective.

If we always align the button to the right, what is going to happen when we have a small screen situation? As you can see, this is not ideal - and somehow worst :).

I think the solution here is to edit the way we're thinking the width. We can suggest having width: 100% for small media queries and width: auto for the bigger ones. How does it sound? :)

[jens1o]

We can suggest having width: 100% for small media queries and width: auto for the bigger ones. How does it sound? :)

I like the idea.

[aminalhazwani]

We see this issue as fixed. CC @pwalm to follow up with engineering.

[jens1o]

We see this issue as fixed. CC @pwalm to follow up with engineering.

You didn't do anything?

[aminalhazwani]

hey @jens1o, you can find the updated documentation here https://design.firefox.com/photon/components/message-bars.html#message-on-multiple-lines

[jens1o]

Alright, I see what you propose as of now, but personally I'd like the button to always use the space and the message bar to be full-width.

[brassy-]

@jens1o How do you make it work when the message goes on multiple lines? Or when the message bar is also dismissable? Our rationale is the following. From a content perspective, the buttons belong with the message: what's going on + how can fix it. We want to have this union to be clear visually, that's why the buttons are close to the content.

I'm curious to understand what is your reasoning and, as always, thank you for the feedback! :)

[jens1o]

@brassy-

Something like this:

The button is horizontally centered in the message box. I've added some margin between the text and the button.

The relationship is very clear and the button to dismiss the notification could be added above it(perhaps both are horizontally centered?).

[jens1o]

@brassy- @aminalhazwani Shall I create a new issue for that so you can discuss about it? :)