Allow dialogues to be closed by "clicking outside"

Author: dbackeus

app/views/application/_flash.html.erb

@@ -7,7 +7,7 @@
   }
 </style>
 
-<dialog class="bottom-0 w-full bg-transparent" <%= "open" if flash[:notice] %>>
+<dialog closedBy="any" class="bottom-0 w-full bg-transparent" <%= "open" if flash[:notice] %>>
   <div
     class="flex bg-white shadow rounded opacity-0 -bottom-20 left-8 fixed p-3 items-center justify-between"
     style="animation: flash 10s; animation-iteration-count: 1;"
@@ -20,7 +20,7 @@
   </div>
 </dialog>
 
-<dialog class="bottom-0 w-full bg-transparent" <%= "open" if flash[:alert] %>>
+<dialog closedBy="any" class="bottom-0 w-full bg-transparent" <%= "open" if flash[:alert] %>>
   <div
     class="flex bg-white shadow rounded opacity-0 -bottom-20 left-8 fixed p-3 items-center justify-between"
     style="animation: flash 10s; animation-iteration-count: 1;"

app/views/servers/prepare_bootstrap.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag "servers-actions-dialog" do %>
-  <dialog id="server-actions-dialog" class="max-w-[60rem] backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
+  <dialog closedBy="any" id="server-actions-dialog" class="max-w-[60rem] backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
     <form method="dialog" class="flex mb-4">
       <h2 class="text-2xl mr-5">Bootstrap server: <%= @server.name %></h2>
       <button class="ml-auto text-gray-500 hover:text-gray-700"><%= icon_close %></button>

app/views/servers/reboot_command.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag "servers-actions-dialog" do %>
-  <dialog id="server-actions-dialog" class="backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
+  <dialog closedBy="any" id="server-actions-dialog" class="backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
     <form method="dialog" class="flex mb-4">
       <h2 class="text-2xl">Reboot Command</h2>
       <button class="ml-auto text-gray-500 hover:text-gray-700"><%= icon_close %></button>

app/views/servers/upgrade_command.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag "servers-actions-dialog" do %>
-  <dialog id="server-actions-dialog" class="max-w-[60rem] backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
+  <dialog closedBy="any" id="server-actions-dialog" class="max-w-[60rem] backdrop:backdrop-blur-sm backdrop:bg-gray-100 backdrop:bg-opacity-30 p-6 rounded-lg shadow-lg">
     <form method="dialog" class="flex mb-4">
       <h2 class="text-2xl">Upgrade Command</h2>
       <button class="ml-auto text-gray-500 hover:text-gray-700"><%= icon_close %></button>