bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2404 from nqst/dialog-viewport-spacing

Browse Source 
Prevent modal dialogs from touching viewport edges
This commit is contained in:
Andy Smith
2026-01-21 11:23:01 -06:00
committed by GitHub
parent 74aca0867f 73cf1dede4
commit 72123dc251
3 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/dialog.css
+5
View File
@@ -35,4 +35,9 @@
} }
} }
} }
/* Ensure padding from viewport edges */
.dialog.panel {
max-inline-size: calc(100vw - var(--inline-space-double) * 2);
}
} }
app/views/boards/edit/_delete.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<%= icon_tag "trash" %> <%= icon_tag "trash" %>
<span>Delete this board</span> <span>Delete this board</span>
</button> </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> <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> <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"> <div class="flex gap-half justify-center margin-block-start">
app/views/cards/_delete.html.erb
+1 -1
View File
@@ -3,7 +3,7 @@
<%= icon_tag "trash" %> <%= icon_tag "trash" %>
<span>Delete this card</span> <span>Delete this card</span>
</button> </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> <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> <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"> <div class="flex gap-half justify-center margin-block-start">