fix(leave dialog): Re-align buttons

With the latest refactoring of the link style
the leave link button visually broke.
Let's reimagine this dialog.

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -59,7 +59,7 @@ body {
     overflow: hidden;
   }
 
-  &:has(:not(:defined)) {
+  &:has(alchemy-spinner:not(:defined)) {
     opacity: var(--custom-elements-loaded, 0);
     animation: custom-elements-loaded 0 linear 250ms forwards;
   }

app/stylesheets/alchemy/admin/base.scss

@@ -192,11 +192,17 @@
   }
 
   .buttons {
-    text-align: right;
-
-    label {
-      float: left;
-      margin-top: var(--spacing-3);
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: auto;
+    gap: var(--spacing-3);
+    align-items: center;
+    margin-top: 2em;
+    margin-bottom: 0;
+
+    > .button {
+      width: 100%;
+      white-space: nowrap;
     }
   }
 }

app/stylesheets/alchemy/admin/dialogs.scss

@@ -1,13 +1,13 @@
 <%= render_message do %>
   <%= Alchemy.t("You are about to leave Alchemy") %>
 <% end %>
-<div data-turbo="false">
-  <p class="buttons">
-    <label><%= Alchemy.t("Do you want to") %></label>
-    <%= link_to Alchemy.t('stay logged in'), alchemy.root_path, class: 'button secondary' %>
-  </p>
-  <%= form_tag Alchemy.config.logout_path, method: Alchemy.config.logout_method, class: 'buttons' do %>
-    <label><%= Alchemy.t('or to completely') %></label>
+<%= form_tag Alchemy.config.logout_path, method: Alchemy.config.logout_method do %>
+  <div class="buttons">
+    <%= link_to Alchemy.t("stay logged in"),
+      alchemy.root_path,
+      rel: "noreferrer",
+      data: {turbo: false},
+      class: "button secondary" %>
     <%= button_tag Alchemy.t(:logout), autofocus: true %>
-  <% end %>
-</div>
+  </div>
+<% end %>

app/views/alchemy/admin/leave.html.erb

@@ -61,7 +61,7 @@
                 <label>#{Alchemy.t(:leave)}</label>
               ).html_safe,
               alchemy.leave_admin_path, {
-                size: "300x155",
+                size: "320x140",
                 title: Alchemy.t("Leave Alchemy")
             }, {'data-alchemy-hotkey' => 'alt+q'}) %>
           <% else %>