TCA-1090 - grow certificate to fit view width

Author: vas3a

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.module.scss

@@ -7,6 +7,7 @@
     display: flex;
 
     background: $tc-grad15;
+    overflow: hidden;
 }
 
 .content-wrap {
@@ -29,6 +30,8 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    z-index: 1;
+    position: relative;
 
     gap: $space-sm;
 
@@ -52,7 +55,7 @@
 .certificate-wrap {
     aspect-ratio: $tca-certif-aspect-ratio;
     width: 100%;
-    max-width: 880px;
+    max-width: 1216px;
     position: relative;
 
     &:global(.large-container) {

src-ts/tools/learn/learn-lib/certificate-page-layout/CertificatePageLayout.tsx

@@ -53,7 +53,12 @@ const CertificatePageLayout: FC<CertificatePageLayoutProps> = (props: Certificat
     const certificateWrapRef: MutableRefObject<HTMLDivElement | any> = useRef()
     const navigateBack: NavigateBackFunction = useNavigateBack()
 
-    useCertificateScaling(props.isReady ? certificateWrapRef : undefined, 880, 880)
+    useCertificateScaling(
+        props.isReady ? certificateWrapRef : undefined,
+        880,
+        880,
+        viewStyle ? 1 : Math.min(),
+    )
 
     const handleBackBtnClick: () => void = useCallback(() => {
         navigateBack(props.fallbackBackUrl ?? '')

src-ts/tools/learn/learn-lib/use-certificate-scaling-hook/useCertificateScaling.hook.tsx

@@ -4,6 +4,7 @@ export function useCertificateScaling(
     certificateRef?: MutableRefObject<HTMLDivElement | undefined>,
     originalSizeLg: number = 1250,
     originalSizeSm: number = 975,
+    scaleLimit: number = 1,
 ): void {
 
     // the certificate isn't responsive: should look the same on mobile and desktop
@@ -19,12 +20,12 @@ export function useCertificateScaling(
             // 975 and 1250 are the original container sizes,
             // and we're dividing by that to get the needed zoom level
             const ratioSize: number = window.innerWidth <= 745 ? originalSizeSm : originalSizeLg
-            const scaleLevel: number = Math.min(1, parentWidth / ratioSize)
+            const scaleLevel: number = Math.min(scaleLimit, parentWidth / ratioSize)
             Object.assign(certificateEl.style, { transform: `scale(${scaleLevel})`, transformOrigin: '0 0' })
         }
 
         window.addEventListener('resize', handleResize, false)
         handleResize()
         return () => window.removeEventListener('resize', handleResize, false)
-    }, [certificateRef, originalSizeLg, originalSizeSm])
+    }, [certificateRef, originalSizeLg, originalSizeSm, scaleLimit])
 }