[6.x] Add padding around 2FA QR code for dark mode scanning (#14460)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Jason Varga <jason@pixelfear.com>

Author: 3 people

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="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" />

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(size: 192, fill: Fill::uniformColor(new Rgb(255, 255, 255), new Rgb(45, 55, 72))),
                 new SvgImageBackEnd
             )
         ))->writeString($this->twoFactorQrCodeUrl());