Fixing qr-code scanner layout (#305)

ioBroker · Jan 13, 2025 · b39badb · b39badb
1 parent cbfccd0
commit b39badb
Showing 1 changed file with 14 additions and 0 deletions.
diff --git 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')) {