Merge pull request #8520 from seballot/multiple-flash-messages

Fix rendering problem with multiple flash messages in the admin section

app/assets/stylesheets/admin/components/messages.scss

@@ -27,24 +27,31 @@
   }
 }
 
-.flash {
+.flash-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
-  padding: 16px;
-  text-align: center;
   z-index: 1000;
-  font-size: 120%;
-  color: $color-1;
-  font-weight: 600;
 
-  &.notice  { background-color: rgba($color-notice,  0.8) }
-  &.success { background-color: rgba($color-success, 0.8) }
-  &.error   { background-color: rgba($color-error,   0.8) }
+  .flash {
+    padding: 18px;
+    text-align: center;  
+    font-size: 120%;
+    color: $color-1;
+    font-weight: 600;
+  
+    &.notice  { background-color: rgba($color-notice,  0.8) }
+    &.success { background-color: rgba($color-success, 0.8) }
+    &.error   { background-color: rgba($color-error,   0.8) }
+
+    // Adjust heights to fit main layout dimension (header, navbar...)
+    &:nth-child(2) { padding: 24px; }
+    &:nth-child(3) { padding: 20px; }
+  }
 }
 
-.notice {
+.notice:not(.flash) {
   padding: 1rem;
   margin-bottom: 1.5rem;
   background-color: $spree-light-blue;

app/views/spree/layouts/_admin_body.html.haml

@@ -3,12 +3,13 @@
 = yield :stripe_js
 
 #wrapper{ data: { hook: '' } }
-  - if flash[:error]
-    .flash.error= flash[:error]
-  - if notice
-    .flash.notice= notice
-  - if flash[:success]
-    .flash.success= flash[:success]
+  .flash-container
+    - if flash[:error]
+      .flash.error= flash[:error]
+    - if notice
+      .flash.notice= notice
+    - if flash[:success]
+      .flash.success= flash[:success]
 
   = render partial: "spree/layouts/admin/progress_spinner"