From ec26f195366595d83636513ab636b7066ef3442b Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 22 Nov 2024 15:02:13 +0100
Subject: [PATCH] Fix cropped QR codes - Fixes #420

---
 resources/js/assets/app.scss               | 9 +++++++++
 resources/js/views/twofaccounts/QRcode.vue | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index 480e4f3f..6d8609e4 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -195,6 +195,15 @@ a:hover {
   background-color: $grey-darker !important;
 }
 
+img.qrcode {
+  max-width: 320px;
+}
+@media screen and (max-height: 500px) {
+  img.qrcode {
+    max-height: 50vh;
+  }
+}
+
 .tfa-grid {
   border-radius: 6px;
   text-align: center;
diff --git a/resources/js/views/twofaccounts/QRcode.vue b/resources/js/views/twofaccounts/QRcode.vue
index c0025fe8..e0c811a6 100644
--- a/resources/js/views/twofaccounts/QRcode.vue
+++ b/resources/js/views/twofaccounts/QRcode.vue
@@ -22,9 +22,9 @@
 <template>
     <div class="modal modal-otp is-active">
         <div class="modal-background"></div>
-        <div class="modal-content">
+        <div class="modal-content modal-with-footer">
             <p class="has-text-centered m-5">
-                <img v-if="qrcode" :src="qrcode" class="has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
+                <img v-if="qrcode" :src="qrcode" class="qrcode has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
                 <Spinner :isVisible="!qrcode" :type="'raw'" class="is-size-1" />
             </p>
         </div>