From 09300941af95aff046982d88609a94ad1fbb7cf8 Mon Sep 17 00:00:00 2001
From: Jamie Curnow <jc@jc21.com>
Date: Wed, 26 Aug 2026 12:48:36 +1000
Subject: [PATCH] Add white padding to qrcode, especially in dark mode

---
 frontend/src/modals/TwoFactorModal.module.css | 5 +++++
 frontend/src/modals/TwoFactorModal.tsx        | 9 +++------
 2 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/modals/TwoFactorModal.module.css

diff --git a/frontend/src/modals/TwoFactorModal.module.css b/frontend/src/modals/TwoFactorModal.module.css
new file mode 100644
index 000000000..4a559c5f8
--- /dev/null
+++ b/frontend/src/modals/TwoFactorModal.module.css
@@ -0,0 +1,5 @@
+.qrcode {
+	max-width: "200px";
+	height: "auto";
+	border: 6px solid #fff;
+}
diff --git a/frontend/src/modals/TwoFactorModal.tsx b/frontend/src/modals/TwoFactorModal.tsx
index 2b8639fa9..aa76d598c 100644
--- a/frontend/src/modals/TwoFactorModal.tsx
+++ b/frontend/src/modals/TwoFactorModal.tsx
@@ -3,11 +3,12 @@ import { Field, Form, Formik } from "formik";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
 import { Alert } from "react-bootstrap";
 import Modal from "react-bootstrap/Modal";
+import QRCode from "react-qr-code";
 import { disable2FA, enable2FA, get2FAStatus, regenerateBackupCodes, start2FASetup } from "src/api/backend";
 import { Button } from "src/components";
 import { T } from "src/locale";
 import { validateString } from "src/modules/Validations";
-import QRCode from "react-qr-code";
+import styles from "./TwoFactorModal.module.css";
 
 type Step = "loading" | "status" | "setup" | "verify" | "backup" | "disable";
 
@@ -156,11 +157,7 @@ const TwoFactorModal = EasyModal.create(({ id, visible, remove }: Props) => {
 						<T id="2fa.setup-instructions" />
 					</p>
 					<div className="text-center mb-3">
-						<QRCode
-							value={setupData.otpauthUrl}
-							size={200}
-							style={{ maxWidth: "200px", height: "auto" }}
-						/>
+						<QRCode value={setupData.otpauthUrl} size={200} className={styles.qrcode} />
 					</div>
 					<label className="mb-3 d-block">
 						<span className="form-label small text-muted">