Update flash

Author: rossta

app/javascript/controllers/flash.js renamed to app/javascript/controllers/flash.ts

@@ -1,4 +1,4 @@
-.flash__container {
+.flash {
   position: fixed;
   bottom: 0;
   right: 0;
@@ -8,14 +8,18 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  padding: var(--space-s);
   gap: var(--space-xs);
   width: fit-content;
 
+  & .flash__message:last-child {
+    margin-bottom: var(--space-s);
+  }
+
   & .flash__message {
     padding: var(--space-xs) var(--space-s);
     border-radius: 4px;
     transition: opacity 750ms ease-out;
+    margin: 0 var(--space-s);
   }
 
   & .flash__alert {

app/javascript/css/components/flash.css

@@ -1,5 +1,5 @@
 <% flash.each do |flash_type, message| %>
-  <div class="flash__message flash__#{flash_type}">
+  <div class="flash__message flash__<%= flash_type %>" data-controller="flash">
     <%= message %>
   </div>
 <% end %>

app/views/application/_flash.html.erb

@@ -46,7 +46,7 @@
     <%= render "application/header" %>
     <main class="">
       <div id="start-here"></div>
-      <div class="flash"><%= render "flash" %></div>
+      <div id="flash" class="flash"><%= render "flash" %></div>
       <%= yield %>
     </main>
     <%= render "application/footer" %>