From 2c0466b51a89b856834f9b5351490b4579eb9db5 Mon Sep 17 00:00:00 2001
From: cryptogopher <cryptogopher@noreply.me>
Date: Fri, 15 Mar 2024 02:29:58 +0100
Subject: [PATCH] Allow display of multiple flash messages

---
 app/assets/stylesheets/application.css | 20 +++++++++++++-------
 app/helpers/application_helper.rb      | 10 ++++++----
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 9fe9f70..55b2218 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -213,20 +213,22 @@ input[type=text]:read-only {
 
 
 #flashes {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  gap: 0.2em;
+  grid-template-columns: 1fr auto auto auto 1fr;
   left: 0;
   pointer-events: none;
   position: fixed;
   right: 0;
-  top: 1em;
+  top: 0.4em;
 }
 .flash {
   align-items: center;
   border-radius: 0.2em;
   color: white;
-  display: flex;
+  display: grid;
+  grid-column: 2/5;
+  grid-template-columns: subgrid;
   pointer-events: auto;
 }
 .flash.alert:before {
@@ -249,18 +251,22 @@ input[type=text]:read-only {
   border-color: #009ade;
   background-color: #009ade;
 }
+.flash > div {
+  grid-column: 2;
+}
 /* NOTE: currently flash button inherits some unnecessary styles from generic
  * button. */
-.flash button {
+.flash > button {
   border: none;
   color: inherit;
   cursor: pointer;
   font-size: 1.4em;
   font-weight: bold;
+  grid-column: 3;
   opacity: 0.6;
   padding: 0.2em 0.4em;
 }
-.flash button:hover {
+.flash > button:hover {
   opacity: 1;
 }
 
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 0b2ca77..4904528 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -90,10 +90,12 @@ module ApplicationHelper
   end
 
   def render_flash_messages
-    flash.map do |entry, message|
-      tag.div class: "flash #{entry}" do
-        tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
-                                       onclick: "this.parentElement.remove();")
+    flash.map do |entry, messages|
+      Array(messages).map do |message|
+        tag.div class: "flash #{entry}" do
+          tag.div(sanitize(message)) + tag.button(sanitize("&times;"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
+        end
       end
     end.join.html_safe
   end