fixes wide certificates view

Author: vas3a

src-ts/tools/learn/course-certificate/certificate-view/CertificateView.module.scss

@@ -52,6 +52,7 @@
     &:global(.large-container) {
         aspect-ratio: unset;
         @include socialPreviewImg;
+        max-width: none;
     }
 
     body:global(.canvas-clone) & {
@@ -75,6 +76,11 @@
         left: 0;
         width: 100%;
     }
+
+    .certificate-wrap:global(.large-container) & {
+        width: 100%;
+        height: 100%;
+    }
 }
 
 .share-btn:global(.button.icon) {

src-ts/tools/learn/learn-lib/tca-certificate-preview/TCACertificatePreview.module.scss

@@ -2,7 +2,7 @@
     flex: 1 1 auto;
     aspect-ratio: 1.25715;
     position: relative;
-
+    
     body:global(.canvas-clone) & {
         transform: none!important;
     }
@@ -21,3 +21,22 @@
         left: 0;
     }
 }
+
+
+:global(.large-container) {
+    .wrap {
+        aspect-ratio: unset;
+        width: 100%;
+        height: 100%;
+        transform: none!important;
+    }
+
+    .inner {
+        position: static;
+        width: 100%;
+        height: 100%;
+        > * {
+            position: relative;
+        }
+    }
+}

src-ts/tools/learn/learn-lib/tca-certificate-preview/tca-certificate/TCACertificate.module.scss

@@ -11,10 +11,15 @@
     display: flex;
     height: 100%;
     color: $black-100;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    :global(.large-container) & {
+        background-size: 100% 100%;
+    }
 
     &-dev {
-        background: url('./assets/bg-dev.png') no-repeat;
-        background-size: cover;
+        background-image: url('./assets/bg-dev.png');
 
         .certTitle {
             color: $tc-dev-track-color;
@@ -26,8 +31,7 @@
     }
 
     &-datascience {
-        background: url('./assets/bg-datascience.png') no-repeat;
-        background-size: cover;
+        background-image: url('./assets/bg-datascience.png');
 
         .certTitle {
             color: $tc-datascience-track-color;
@@ -39,8 +43,7 @@
     }
 
     &-design {
-        background: url('./assets/bg-design.png') no-repeat;
-        background-size: cover;
+        background-image: url('./assets/bg-design.png');
 
         .certTitle {
             color: $tc-design-track-color;
@@ -52,8 +55,7 @@
     }
 
     &-qa {
-        background: url('./assets/bg-qa.png') no-repeat;
-        background-size: cover;
+        background-image: url('./assets/bg-qa.png');
 
         .certTitle {
             color: $tc-qa-track-color;

src-ts/tools/learn/tca-certificate/user-certificate/UserTCACertificate.tsx

@@ -25,9 +25,16 @@ const UserTCACertificate: FC<{}> = () => {
     const [profileReady, setProfileReady]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
 
     const certificationParam: string = routeParams.certification ?? ''
-
     const tcaCertificationPath: string = getTCACertificationPath(certificationParam)
 
+    function hideSiblings(el: HTMLElement): void {
+        [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => {
+            if (c !== el) {
+                Object.assign(c.style, { display: 'none' })
+            }
+        })
+    }
+
     useEffect(() => {
         if (routeParams.memberHandle) {
             profileGetPublicAsync(routeParams.memberHandle)
@@ -44,11 +51,8 @@ const UserTCACertificate: FC<{}> = () => {
             return
         }
 
-        [].forEach.call(el.parentElement?.children ?? [], (c: HTMLElement) => {
-            if (c !== el) {
-                Object.assign(c.style, { display: 'none' })
-            }
-        })
+        hideSiblings(el)
+        hideSiblings(el.parentElement as HTMLElement)
         el.classList.add(styles['full-screen-cert'])
     })