From 663883a4f7260a030b6ebee7b2635035d9ab593f Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Thu, 6 Jun 2024 16:56:14 +0300
Subject: [PATCH] UI: fixed qr code not rendering on apple devices

---
 .../lib/mobile-app-qrcode-widget.component.html      |  2 +-
 .../lib/mobile-app-qrcode-widget.component.scss      | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
index b526cfd079..1426d02a0d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
@@ -25,7 +25,7 @@
     <div class="tb-flex row center align-center shrink"
          [class.row]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.RIGHT"
          [class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
-      <div class="tb-qrcode" (click)="navigateByDeepLink($event)" [innerHTML]="qrCodeSVG | safe: 'html'" ></div>
+      <div class="tb-qrcode" (click)="navigateByDeepLink($event)" [innerHTML]="qrCodeSVG | safe: 'html'"></div>
       <div class="tb-badges" [class.tb-no-interaction]="previewMode"
            *ngIf="(mobileAppSettings?.iosConfig.enabled || mobileAppSettings?.androidConfig.enabled) &&
                     mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss
index 1447e5cf61..5bd423d796 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.scss
@@ -82,8 +82,14 @@
 }
 
 :host ::ng-deep {
-  .tb-mobile-app-qrcode-panel .tb-widget-title {
-    padding: 0;
-    z-index: 1;
+  .tb-mobile-app-qrcode-panel {
+    .tb-widget-title {
+      padding: 0;
+      z-index: 1;
+    }
+    .tb-qrcode svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 }