From 6a5bab8771c187237958a673cefde8d151483cd8 Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 17 Feb 2026 11:50:31 +0100
Subject: [PATCH 1/3] Wrap cancellation section in `.settings__section`

---
 .../account/settings/_cancellation.html.erb   | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/app/views/account/settings/_cancellation.html.erb b/app/views/account/settings/_cancellation.html.erb
index 5c493edd55..ec68c6f556 100644
--- a/app/views/account/settings/_cancellation.html.erb
+++ b/app/views/account/settings/_cancellation.html.erb
@@ -1,26 +1,28 @@
 <% if Current.account.cancellable? && Current.user.owner? %>
-  <header class="margin-block-start-double">
-    <h2 class="divider txt-large txt-negative">Cancel account</h2>
-    <p class="margin-none-block">Delete your Fizzy account</p>
-  </header>
+  <section class="settings__section">
+    <header>
+      <h2 class="divider txt-negative">Cancel account</h2>
+      <div>Delete your Fizzy account.</div>
+    </header>
 
-  <div data-controller="dialog" data-dialog-modal-value="true">
-    <button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
+    <div data-controller="dialog" data-dialog-modal-value="true">
+      <button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
 
-    <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
-      <h2 class="margin-none txt-large txt-negative">Delete your account?</h2>
-      <ul class="txt-align-start">
-        <li>All users, including you, will lose access</li>
-        <% if Current.account.try(:active_subscription) %>
-          <li>Your subscription will be canceled</li>
-        <% end %>
-        <li>After 30 days your data will be permanently deleted</li>
-      </ul>
+      <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
+        <h2 class="margin-none txt-large txt-negative">Delete your account?</h2>
+        <ul class="txt-align-start">
+          <li>All users, including you, will lose access</li>
+          <% if Current.account.try(:active_subscription) %>
+            <li>Your subscription will be canceled</li>
+          <% end %>
+          <li>After 30 days your data will be permanently deleted</li>
+        </ul>
 
-      <div class="flex gap justify-center">
-        <button type="button" class="btn" data-action="dialog#close">Cancel</button>
-        <%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", form: { data: { action: "submit->dialog#close", turbo: false } } %>
-      </div>
-    </dialog>
-  </div>
+        <div class="flex gap justify-center">
+          <button type="button" class="btn" data-action="dialog#close">Cancel</button>
+          <%= button_to "Delete my account", account_cancellation_path, method: :post, class: "btn btn--negative", form: { data: { action: "submit->dialog#close", turbo: false } } %>
+        </div>
+      </dialog>
+    </div>
+  </section>
 <% end %>

From 18d4682b053bcec59c340d55ca4f4af828418dc2 Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 17 Feb 2026 11:51:24 +0100
Subject: [PATCH 2/3] Set `panel-size` for confirmation dialog

---
 app/views/account/settings/_cancellation.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/account/settings/_cancellation.html.erb b/app/views/account/settings/_cancellation.html.erb
index ec68c6f556..9165feeb75 100644
--- a/app/views/account/settings/_cancellation.html.erb
+++ b/app/views/account/settings/_cancellation.html.erb
@@ -8,7 +8,7 @@
     <div data-controller="dialog" data-dialog-modal-value="true">
       <button type="button" class="btn btn--negative" data-action="dialog#open">Delete account</button>
 
-      <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog">
+      <dialog class="dialog panel panel--wide shadow" data-dialog-target="dialog" style="--panel-size: 48ch;">
         <h2 class="margin-none txt-large txt-negative">Delete your account?</h2>
         <ul class="txt-align-start">
           <li>All users, including you, will lose access</li>

From 179fd18e4fee4a45f10b6a751d0898f87e4b79b5 Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 17 Feb 2026 11:51:37 +0100
Subject: [PATCH 3/3] Add missing comma

---
 app/views/account/settings/_cancellation.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/account/settings/_cancellation.html.erb b/app/views/account/settings/_cancellation.html.erb
index 9165feeb75..49f87512fd 100644
--- a/app/views/account/settings/_cancellation.html.erb
+++ b/app/views/account/settings/_cancellation.html.erb
@@ -15,7 +15,7 @@
           <% if Current.account.try(:active_subscription) %>
             <li>Your subscription will be canceled</li>
           <% end %>
-          <li>After 30 days your data will be permanently deleted</li>
+          <li>After 30 days, your data will be permanently deleted</li>
         </ul>
 
         <div class="flex gap justify-center">