From c9f6f9e8920b1a6572241354ded62f26667fa642 Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Mon, 3 Jul 2023 12:25:43 -0300
Subject: [PATCH] feat(cxl-ui): Added paddin property to handle parent contaner
 sizes when scaling

---
 packages/cxl-ui/scss/cxl-credential.scss         |  3 ++-
 packages/cxl-ui/src/components/cxl-credential.js | 12 +++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-credential.scss b/packages/cxl-ui/scss/cxl-credential.scss
index 7261f9da8..73cbe5c7a 100644
--- a/packages/cxl-ui/scss/cxl-credential.scss
+++ b/packages/cxl-ui/scss/cxl-credential.scss
@@ -1,5 +1,6 @@
 :host {
   display: flex;
+  margin: auto;
 }
 
 .container {
@@ -57,7 +58,7 @@
     font-size: 20px;
     font-weight: 200;
     text-transform: lowercase;
-    letter-spacing: 0.09em;
+    letter-spacing: 2px;
   }
 
   #header {
diff --git a/packages/cxl-ui/src/components/cxl-credential.js b/packages/cxl-ui/src/components/cxl-credential.js
index 6736c4db5..9b06e89a7 100644
--- a/packages/cxl-ui/src/components/cxl-credential.js
+++ b/packages/cxl-ui/src/components/cxl-credential.js
@@ -32,7 +32,9 @@ export class CXLCredentialElement extends LitElement {
 
   @property({ type: Number }) scale = 0.5;
 
-  @property({ type: Number }) maxWidth;
+  @property({ type: Number, attribute: 'max-width' }) maxWidth;
+
+  @property({ type: Number, attribute: 'parent-padding' }) parentPadding = 0;
 
   @query('#qr-code') qrCodeCanvas = null;
 
@@ -97,7 +99,7 @@ export class CXLCredentialElement extends LitElement {
    * device orientation. But it will adjust, if the page is reloaded after.
    */
   _handleScaling() {
-    const width = this.maxWidth || window.innerWidth;
+    const width = this.maxWidth  || window.innerWidth - this.parentPadding;
     const finalW = 1464 * this.scale;
     this.correctionFactor = width < finalW || this.maxWidth ? width / finalW : 1;
     this.style.height = `${1120 * this.scale * this.correctionFactor}px`;
@@ -128,8 +130,8 @@ export class CXLCredentialElement extends LitElement {
       this.setAttribute('theme', this.type === 'minidegree' ? 'dark' : 'light');
     }
 
-    if (changes.has('scale')) {
-      this._handleScaling();
+    if (changes.has('scale') || changes.has('correctionFactor')) {
+      requestAnimationFrame(() => this._handleScaling());
     }
   }
 
@@ -158,7 +160,7 @@ export class CXLCredentialElement extends LitElement {
           <div class="code">
             <div>
               <canvas id="qr-code"></canvas>
-              <div id="qr-code-text" class="thin">certificate/${this.credentialId}</div>
+              <div id="qr-code-text" class="thin">certificate : ${this.credentialId}</div>
             </div>
           </div>
         </section>