diff --git a/app/assets/stylesheets/utilities.css b/app/assets/stylesheets/utilities.css
index 6cf59bfed..761a24b5d 100644
--- a/app/assets/stylesheets/utilities.css
+++ b/app/assets/stylesheets/utilities.css
@@ -251,6 +251,12 @@
   }
 }
 
+/* QR Codes */
+.qr-code {
+  aspect-ratio: 1;
+  block-size: 50dvh;
+}
+
 /* Accessibility */
 .for-screen-reader {
   block-size: 1px;
diff --git a/app/views/accounts/users/_invite.html.erb b/app/views/accounts/users/_invite.html.erb
index 48d7b6ba9..f18982dd4 100644
--- a/app/views/accounts/users/_invite.html.erb
+++ b/app/views/accounts/users/_invite.html.erb
@@ -9,7 +9,7 @@
   </label>
 
   <div class="flex align-center gap">
-    <div data-controller="dialog" class="flex-inline">
+    <div data-controller="dialog" data-dialog-modal-value="true" class="flex-inline">
       <%= tag.button class: "btn", data: { action: "dialog#open" } do %>
         <%= image_tag "qr-code.svg", aria: { hidden: "true" }, size: 24, class: "colorize--black" %>
         <span class="for-screen-reader">Show join link QR code</span>