Allow display of multiple flash messages

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;
 }
 

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("×"), 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("×"), tabindex: -1,
+                                                  onclick: "this.parentElement.remove();")
+        end
       end
     end.join.html_safe
   end