From 4ffc6d836ea031e65218ffc28acb4aa3e3e2d6fe Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Tue, 26 Mar 2024 16:27:27 +0100
Subject: [PATCH] optimise image

---
 .../components/mfa-provider-default.element.ts           | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
index 083ec02289..3bbe517784 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/user/current-user/components/mfa-provider-default.element.ts
@@ -98,9 +98,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 										</umb-localize>
 									</p>
 									<img
+										id="qrCode"
 										.src=${this._qrCodeSetupImageUrl}
 										alt=${this.localize.term('user_2faQrCodeAlt')}
-										title=${this.localize.term('user_2faQrCodeTitle')} />
+										title=${this.localize.term('user_2faQrCodeTitle')}
+										loading="eager" />
 								</div>
 								<uui-form-layout-item class="text-center">
 									<uui-label for="code" slot="label" required>
@@ -192,6 +194,11 @@ export class UmbMfaProviderDefaultElement extends UmbLitElement implements UmbMf
 				height: 100%;
 			}
 
+			#qrCode {
+				width: 100%;
+				aspect-ratio: 1;
+			}
+
 			#code {
 				width: 100%;
 				max-width: 300px;