Is this how you intended it? I am not sure if that looks better, as it has two visual breaks: From header to flash message and from flash message to main content.
Maybe more like this? (but seems hard to realize with CSS to me)
Another option I see would be to align with the main conten—what do you think?
I found a straight forward approach to use the full width up to the sidebar which should work on all pages. But I can't find a working solution to push the sidebar down only if a flash message is displayed (because the sidebar is display: fixed).
This is how it looks like:
Unlike my previous approach it also wraps nicely on small screens if the message is too long:
Can we drop that requirement?
I found a straight forward approach to use the full width up to the sidebar which should work on all pages. But I can't find a working solution to push the sidebar down only if a flash message is displayed (because the sidebar is display: fixed).
My idea was to wrap the .flash-container inside a .container-fluid .container-limited or at least mimic its behavior (max-width: 1280px; margin-right: auto; margin-left: auto).
I planned on making this one of my next merge requests...