From aea90f4b5088a1eee1cffda00e453945cb303300 Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 20 Jan 2026 10:40:04 +0100
Subject: [PATCH 1/4] Add viewport padding to dialogs on mobile

---
 app/assets/stylesheets/dialog.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css
index 5d6a7eb0e..632d9af74 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -35,4 +35,11 @@
       }
     }
   }
+
+  /* Ensure padding from viewport edges on narrow screens */
+  @media (max-width: 639px) {
+    .dialog.panel {
+      max-inline-size: 94vw;
+    }
+  }
 }

From aba88cdc3ff66293f0c8c843165a51de80cc14ef Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 20 Jan 2026 10:40:29 +0100
Subject: [PATCH 2/4] Use CSS variable for panel size in delete dialogs

---
 app/views/boards/edit/_delete.html.erb | 2 +-
 app/views/cards/_delete.html.erb       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/boards/edit/_delete.html.erb b/app/views/boards/edit/_delete.html.erb
index ec346f590..9d9b7f441 100644
--- a/app/views/boards/edit/_delete.html.erb
+++ b/app/views/boards/edit/_delete.html.erb
@@ -3,7 +3,7 @@
     <%= icon_tag "trash" %>
     <span>Delete this board</span>
   </button>
-  <dialog class="dialog panel fill-white shadow gap flex-column" style="max-width: 40ch" data-dialog-target="dialog">
+  <dialog class="dialog panel fill-white shadow gap flex-column" style="--panel-size: 40ch" data-dialog-target="dialog">
     <h3 class="txt-large txt-bold">Delete this board?</h3>
     <p class="txt-medium margin-block-half">Are you sure you want to permanently delete this board and all the cards on it? This can't be undone.</p>
     <div class="flex gap-half justify-center margin-block-start">
diff --git a/app/views/cards/_delete.html.erb b/app/views/cards/_delete.html.erb
index 43afbbad2..e6b999ee0 100644
--- a/app/views/cards/_delete.html.erb
+++ b/app/views/cards/_delete.html.erb
@@ -3,7 +3,7 @@
     <%= icon_tag "trash" %>
     <span>Delete this card</span>
   </button>
-  <dialog class="dialog panel fill-white shadow gap flex-column" style="max-width: 40ch" data-dialog-target="dialog">
+  <dialog class="dialog panel fill-white shadow gap flex-column" style="--panel-size: 40ch" data-dialog-target="dialog">
     <h3 class="txt-large txt-bold">Delete this card?</h3>
     <p class="txt-medium margin-block-half">Are you sure you want to permanently delete this card?</p>
     <div class="flex gap-half justify-center margin-block-start">

From bfea02ebd0cf3a107afd70b472ea1b75623f7359 Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 20 Jan 2026 10:54:39 +0100
Subject: [PATCH 3/4] Actually make it affect larger screens too

And remove a magic number
---
 app/assets/stylesheets/dialog.css | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css
index 632d9af74..75f03136a 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -36,10 +36,8 @@
     }
   }
 
-  /* Ensure padding from viewport edges on narrow screens */
-  @media (max-width: 639px) {
-    .dialog.panel {
-      max-inline-size: 94vw;
-    }
+  /* Ensure padding from viewport edges */
+  .dialog.panel {
+    max-inline-size: calc(100vw - var(--block-space-double));
   }
 }

From 73cf1dede491b7e5afa4a3ae9f3994d02c5d79ff Mon Sep 17 00:00:00 2001
From: Alexander Zaytsev <nqst@users.noreply.github.com>
Date: Tue, 20 Jan 2026 20:51:01 +0100
Subject: [PATCH 4/4] Use inline spacing variable

---
 app/assets/stylesheets/dialog.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css
index 75f03136a..4e10ccabb 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -38,6 +38,6 @@
 
   /* Ensure padding from viewport edges */
   .dialog.panel {
-    max-inline-size: calc(100vw - var(--block-space-double));
+    max-inline-size: calc(100vw - var(--inline-space-double) * 2);
   }
 }