From eeb269adad3c50af970921ee29cc9f03de123f94 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Wed, 18 Dec 2024 12:38:45 -0600
Subject: [PATCH] Needs display class and modal attribute

---
 app/assets/stylesheets/utilities.css      | 6 ++++++
 app/views/accounts/users/_invite.html.erb | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

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>