From 0864bea2aef8ee461e081839211b794395a7637a Mon Sep 17 00:00:00 2001
From: Duncan McClean <duncan@duncanmcclean.com>
Date: Wed, 8 Apr 2026 16:43:43 +0100
Subject: [PATCH 1/4] add a little around the 2fa qr code

---
 resources/js/components/two-factor/Setup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index b74fdd1f064..b679073b7ed 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -67,7 +67,7 @@ watch(setupModalOpen, (open) => {
                     <ui-description class="mb-6">{{ __('statamic::messages.two_factor_setup_instructions') }}</ui-description>
 
                     <div class="flex space-x-6">
-                        <div class="bg-white" v-html="qrCode"></div>
+                        <div class="bg-white p-2" v-html="qrCode"></div>
                         <div class="space-y-6 w-full">
                             <ui-field :label="__('Setup Key')">
                                 <ui-input copyable readonly :model-value="secretKey" />

From 0dd6c0f957b7c43de2367b789724b22fa73975c2 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Apr 2026 12:01:05 -0400
Subject: [PATCH 2/4] Add border and rounded corners to 2FA QR code container

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/js/components/two-factor/Setup.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index b679073b7ed..3226ac49e6a 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -67,7 +67,7 @@ watch(setupModalOpen, (open) => {
                     <ui-description class="mb-6">{{ __('statamic::messages.two_factor_setup_instructions') }}</ui-description>
 
                     <div class="flex space-x-6">
-                        <div class="bg-white p-2" v-html="qrCode"></div>
+                        <div class="bg-white p-2 border border-gray-200 rounded-md" v-html="qrCode"></div>
                         <div class="space-y-6 w-full">
                             <ui-field :label="__('Setup Key')">
                                 <ui-input copyable readonly :model-value="secretKey" />

From 1383224b0d1a8068133386ef5741a6f940c3e0bc Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Apr 2026 12:09:40 -0400
Subject: [PATCH 3/4] Use proper QR code quiet zone margin instead of CSS
 padding

Restore the default 4-module margin in RendererStyle instead of
overriding it to 0, giving the QR code a spec-compliant quiet zone
for reliable scanning in dark mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/js/components/two-factor/Setup.vue | 2 +-
 src/Auth/User.php                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
index 3226ac49e6a..ff745b5b329 100644
--- a/resources/js/components/two-factor/Setup.vue
+++ b/resources/js/components/two-factor/Setup.vue
@@ -67,7 +67,7 @@ watch(setupModalOpen, (open) => {
                     <ui-description class="mb-6">{{ __('statamic::messages.two_factor_setup_instructions') }}</ui-description>
 
                     <div class="flex space-x-6">
-                        <div class="bg-white p-2 border border-gray-200 rounded-md" v-html="qrCode"></div>
+                        <div class="shrink-0 rounded-md border border-gray-200 dark:border-none overflow-hidden" v-html="qrCode"></div>
                         <div class="space-y-6 w-full">
                             <ui-field :label="__('Setup Key')">
                                 <ui-input copyable readonly :model-value="secretKey" />
diff --git a/src/Auth/User.php b/src/Auth/User.php
index 8953a0025fa..bdef571c0c8 100644
--- a/src/Auth/User.php
+++ b/src/Auth/User.php
@@ -430,7 +430,7 @@ public function twoFactorQrCodeSvg(): string
     {
         $svg = (new Writer(
             new ImageRenderer(
-                new RendererStyle(192, 0, null, null, Fill::uniformColor(new Rgb(255, 255, 255), new Rgb(45, 55, 72))),
+                new RendererStyle(192, 4, null, null, Fill::uniformColor(new Rgb(255, 255, 255), new Rgb(45, 55, 72))),
                 new SvgImageBackEnd
             )
         ))->writeString($this->twoFactorQrCodeUrl());

From 71fac3082c28b5a9be2957335ae4678a35bafacb Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 8 Apr 2026 12:11:17 -0400
Subject: [PATCH 4/4] Use named arguments for RendererStyle constructor

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/Auth/User.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Auth/User.php b/src/Auth/User.php
index bdef571c0c8..37347aa07d8 100644
--- a/src/Auth/User.php
+++ b/src/Auth/User.php
@@ -430,7 +430,7 @@ public function twoFactorQrCodeSvg(): string
     {
         $svg = (new Writer(
             new ImageRenderer(
-                new RendererStyle(192, 4, null, null, Fill::uniformColor(new Rgb(255, 255, 255), new Rgb(45, 55, 72))),
+                new RendererStyle(size: 192, fill: Fill::uniformColor(new Rgb(255, 255, 255), new Rgb(45, 55, 72))),
                 new SvgImageBackEnd
             )
         ))->writeString($this->twoFactorQrCodeUrl());