From b39badbd99d7386cf3682c4f6be43d7f0df61f82 Mon Sep 17 00:00:00 2001
From: Bluefox <dogafox@gmail.com>
Date: Mon, 13 Jan 2025 18:33:55 +0000
Subject: [PATCH] Fixing qr-code scanner layout (#305)

---
 src-admin/src/components/QrCodeDialog.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src-admin/src/components/QrCodeDialog.tsx b/src-admin/src/components/QrCodeDialog.tsx
index 1040dd13..099fa2ef 100644
--- a/src-admin/src/components/QrCodeDialog.tsx
+++ b/src-admin/src/components/QrCodeDialog.tsx
@@ -143,8 +143,22 @@ export default class QrCodeDialog extends Component<QrCodeDialogProps, QrCodeDia
                                 id="video-container"
                                 style={{ width: 250, height: 250 }}
                             >
+                                <style>
+                                    {`
+                                    .qrscan {
+                                        svg {
+                                            height: 100%;
+                                            width: 100%;
+                                        }
+                                    }
+                                    `}
+                                </style>
                                 <Scanner
                                     formats={['qr_code', 'rm_qr_code', 'micro_qr_code']}
+                                    classNames={{
+                                        container: 'qrscan',
+                                        video: 'aspect-square w-full h-full object-cover',
+                                    }}
                                     onScan={result => this.setState({ qrCode: result[0].rawValue, qrError: '' })}
                                     onError={(error: unknown): void => {
                                         if ((error as Error)?.message.includes('secure context')) {