From 588420ff934a508a8785b0f4da165f5218296b89 Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Fri, 26 Nov 2021 11:14:43 +0100
Subject: [PATCH] Fixs #8442 display multiple flash messages correctly

---
 .../admin/components/messages.scss            | 27 ++++++++++++-------
 app/views/spree/layouts/_admin_body.html.haml | 13 ++++-----
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/admin/components/messages.scss b/app/assets/stylesheets/admin/components/messages.scss
index b7950db01f..18bf5b5a66 100644
--- a/app/assets/stylesheets/admin/components/messages.scss
+++ b/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;
diff --git a/app/views/spree/layouts/_admin_body.html.haml b/app/views/spree/layouts/_admin_body.html.haml
index fc798d0fc3..1d2914e1cf 100644
--- a/app/views/spree/layouts/_admin_body.html.haml
+++ b/app/views/spree/layouts/_admin_body.html.haml
@@ -2,12 +2,13 @@
 = render "layouts/i18n_script"
 
 #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"