cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Prevent flash messages from expanding offscreen

Browse source 
Because we are using an edge-to-edge layout for the flash messages,
the negative margins on the row were expanding the element offscreen.

Bootstrap provides a "no-gutter" class for removing these margins,
but that also drops the spacing between columns which we want to preserve.
So instead we use a margin override on the row only.

Additionally, drop some padding css in favour of a utility class

Fixes #3351

Bug was introduced in 3dd639c8d0
This commit is contained in:
Andy Allan 2021-11-24 14:26:16 +00:00
parent abbd5a30d4
commit c343f3ed3e
2 changed files with 3 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/common.scss
View file

@ -1312,8 +1312,6 @@ tr.turn:hover {
/* Rules for "flash" notice boxes shown at the top of the content area */
.flash {
padding: $lineheight;
&.error {
background-color: #ff7070;
}

6
app/views/layouts/_flash.html.erb
View file

@ -1,5 +1,5 @@
<% if flash[:error] %>
<div class="flash error row align-items-center">
<div class="flash error row mx-0 p-3 align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml" />
@ -11,7 +11,7 @@
<% end %>
<% if flash[:warning] %>
<div class="flash warning row align-items-center">
<div class="flash warning row mx-0 p-3 align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
@ -23,7 +23,7 @@
<% end %>
<% if flash[:notice] %>
<div class="flash notice row align-items-center">
<div class="flash notice row mx-0 p-3 align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>