From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 24 Nov 2021 14:26:16 +0000 (+0000)
Subject: Prevent flash messages from expanding offscreen
X-Git-Tag: live~1335^2
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/c343f3ed3eca34bd3520b00ff8e55757f59d0866

Prevent flash messages from expanding offscreen

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 3dd639c8d02677b773935aa982ba0c9f3cc209e5
---

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f2afdcf7a..87f262ff0 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -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;
   }
diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index f8eabaeb3..5dda3ad5c 100644
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -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>