Fix flashes display after grid introduction

Closes #5

app/assets/stylesheets/application.css

@@ -202,18 +202,28 @@ input[type=text]:read-only {
 }
 
 
+#flashes {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  top: 1em;
+}
 .flash {
   align-items: center;
-  border-radius: 0.2rem;
+  border-radius: 0.2em;
   color: white;
   display: flex;
-  font-size: 1.0rem;
+  pointer-events: auto;
 }
 .flash.alert:before {
   content: url('pictograms/alert-outline.svg');
-  height: 1.4rem;
-  margin: 0 0.5rem;
-  width: 1.4rem;
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.alert {
   border-color: #ff1f5b;
@@ -221,25 +231,24 @@ input[type=text]:read-only {
 }
 .flash.notice:before {
   content: url('pictograms/check-circle-outline.svg');
-  height: 1.4rem;
-  margin: 0 0.5rem;
-  width: 1.4rem;
+  height: 1.4em;
+  margin: 0 0.5em;
+  width: 1.4em;
 }
 .flash.notice {
   border-color: #009ade;
   background-color: #009ade;
 }
+/* NOTE: currently flash button inherits some unnecessary styles from generic
+ * button. */
 .flash button {
-  background-color: inherit;
-  border: inherit;
-  border-radius: inherit;
+  border: none;
   color: inherit;
   cursor: pointer;
-  font-size: 1.4rem;
+  font-size: 1.4em;
   font-weight: bold;
-  margin-left:auto;
   opacity: 0.6;
-  padding: 0.2rem 0.2rem;
+  padding: 0.2em 0.4em;
 }
 .flash button:hover {
   opacity: 1;

app/controllers/application_controller.rb

@@ -47,6 +47,8 @@ class ApplicationController < ActionController::Base
 
   def run_and_render(action)
     send action
-    render action
+    # 2024-01-17, Rails 7.1.2: For unknown reason turbo_stream layout is omitted
+    # during render on POST method only (GET, DESTROY are ok).
+    render action, layout: 'application'
   end
 end

app/controllers/units_controller.rb

@@ -19,7 +19,7 @@ class UnitsController < ApplicationController
   def create
     @unit = current_user.units.new(unit_params)
     if @unit.save
-      flash[:notice] = t(".success")
+      flash.now[:notice] = t(".success")
       run_and_render :index
     else
       render :new
@@ -31,7 +31,7 @@ class UnitsController < ApplicationController
 
   def update
     if @unit.update(unit_params)
-      flash[:notice] = t(".success")
+      flash.now[:notice] = t(".success")
       run_and_render :index
     else
       render :edit
@@ -40,7 +40,7 @@ class UnitsController < ApplicationController
 
   def destroy
     if @unit.destroy
-      flash[:notice] = t(".success")
+      flash.now[:notice] = t(".success")
     end
     run_and_render :index
   end

app/helpers/application_helper.rb

@@ -93,7 +93,7 @@ module ApplicationHelper
     flash.map do |entry, message|
       tag.div class: "flash #{entry}" do
         tag.div(sanitize(message)) + tag.button(sanitize("×"), tabindex: -1,
-                                       onclick: "this.parentElement.style.display='none';")
+                                       onclick: "this.parentElement.remove();")
       end
     end.join.html_safe
   end

test/system/units_test.rb

@@ -41,8 +41,7 @@ class UnitsTest < ApplicationSystemTestCase
       assert_selector 'tr', count: @user.units.count
     end
     assert_selector :link_or_button, text: t('units.index.add_unit')
-
-    # assert_selector flash
+    assert_selector '.flash.notice', text: t('units.create.success')
   end
 
   test "close new unit form with escape" do