From 3dd639c8d02677b773935aa982ba0c9f3cc209e5 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 23 Jun 2021 17:38:54 +0100
Subject: [PATCH] Refactor flash messages to use a flex row for positioning

This works better for narrow widths and needs less custom CSS.
---
 app/assets/stylesheets/common.scss | 19 --------------
 app/views/layouts/_flash.html.erb  | 42 +++++++++++++++++-------------
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 1ec9e08e0..736125bed 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1404,25 +1404,6 @@ tr.turn:hover {
   &.notice {
     background-color: #CBEEA7;
   }
-
-  div.message {
-    display: inline-block;
-    margin-left: $lineheight / 2;
-    vertical-align: middle;
-
-    p {
-      margin-top: $lineheight * 0.5;
-      margin-bottom: $lineheight * 0.5;
-
-      &:first-child {
-        margin-top: 0px;
-      }
-
-      &:last-child {
-        margin-bottom: 0px;
-      }
-    }
-  }
 }
 
 /* Rules for highlighting fields with rails validation errors */
diff --git a/app/views/layouts/_flash.html.erb b/app/views/layouts/_flash.html.erb
index f8a89d6df..f8eabaeb3 100644
--- a/app/views/layouts/_flash.html.erb
+++ b/app/views/layouts/_flash.html.erb
@@ -1,29 +1,35 @@
 <% if flash[:error] %>
-  <div class="flash error">
-    <picture>
-      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml" />
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
-    </picture>
-    <div class="message"><%= render_flash(flash[:error]) %></div>
+  <div class="flash error row align-items-center">
+    <div class="col-auto">
+      <picture>
+        <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml" />
+        <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      </picture>
+    </div>
+    <div class="col"><%= render_flash(flash[:error]) %></div>
   </div>
 <% end %>
 
 <% if flash[:warning] %>
-  <div class="flash warning">
-    <picture>
-      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
-    </picture>
-    <div class="message"><%= render_flash(flash[:warning]) %></div>
+  <div class="flash warning row align-items-center">
+    <div class="col-auto">
+      <picture>
+        <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
+        <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      </picture>
+    </div>
+    <div class="col"><%= render_flash(flash[:warning]) %></div>
   </div>
 <% end %>
 
 <% if flash[:notice] %>
-  <div class="flash notice">
-    <picture>
-      <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
-      <%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
-    </picture>
-    <div class="message"><%= render_flash(flash[:notice]) %></div>
+  <div class="flash notice row align-items-center">
+    <div class="col-auto">
+      <picture>
+        <source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
+        <%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
+      </picture>
+    </div>
+    <div class="col"><%= render_flash(flash[:notice]) %></div>
   </div>
 <% end %>
-- 
2.43.2