From 995ca57b521c67a8e335079630f00fd28c39289a Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Wed, 22 Feb 2023 13:46:52 +0200
Subject: [PATCH 1/2] TCA-1023 - show tooltip near estimated time of completion

---
 .../CertificationDetailsSidebar.tsx                      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
index 3048418b2..541bfca5a 100644
--- a/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
+++ b/src-ts/tools/learn/certification-details/certification-details-sidebar/CertificationDetailsSidebar.tsx
@@ -82,6 +82,15 @@ const CertificationDetailsSidebar: FC<CertificationDetailsSidebarProps> = (props
                     </span>
                     <span className='quote-main'>
                         <CompletionTimeRange range={props.certification.completionTimeRange} />
+                        <Tooltip
+                            content={renderTooltipContents(<IconSolid.ClockIcon />, [
+                                'Assuming 4 hour',
+                                'learning per day',
+                            ])}
+                            place='bottom'
+                            trigger={<IconOutline.InformationCircleIcon />}
+                            triggerOn='hover'
+                        />
                     </span>
                 </li>
                 {!props.certProgress && (

From 6b9e37feef6581f8b976744bbf82989ca17867a2 Mon Sep 17 00:00:00 2001
From: Vasilica <olariu.vasilica@gmail.com>
Date: Wed, 22 Feb 2023 13:47:26 +0200
Subject: [PATCH 2/2] TCA-1022 - fix vertical height on mobile for modals

---
 src-ts/App.tsx                                |  4 +++-
 src-ts/lib/hooks/index.ts                     |  1 +
 .../lib/hooks/use-viewport-units-fix.hook.ts  | 21 +++++++++++++++++++
 src-ts/lib/styles/_modals.scss                |  2 +-
 4 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 src-ts/lib/hooks/use-viewport-units-fix.hook.ts

diff --git a/src-ts/App.tsx b/src-ts/App.tsx
index 10e9900f5..a075e7d2d 100644
--- a/src-ts/App.tsx
+++ b/src-ts/App.tsx
@@ -3,7 +3,7 @@ import { Routes } from 'react-router-dom'
 import { toast, ToastContainer } from 'react-toastify'
 
 import { Header } from './header'
-import { routeContext, RouteContextData } from './lib'
+import { routeContext, RouteContextData, useViewportUnitsFix } from './lib'
 
 const App: FC<{}> = () => {
 
@@ -12,6 +12,8 @@ const App: FC<{}> = () => {
     const routeElements: Array<ReactElement> = allRoutes
         .map(route => getRouteElement(route))
 
+    useViewportUnitsFix()
+
     return (
         <>
             <Header />
diff --git a/src-ts/lib/hooks/index.ts b/src-ts/lib/hooks/index.ts
index 920935edc..712ffcf02 100644
--- a/src-ts/lib/hooks/index.ts
+++ b/src-ts/lib/hooks/index.ts
@@ -2,4 +2,5 @@ export * from './use-check-is-mobile.hook'
 export * from './use-click-outside.hook'
 export * from './use-on-hover-element.hook'
 export * from './use-storage.hook'
+export * from './use-viewport-units-fix.hook'
 export * from './use-window-size.hook'
diff --git a/src-ts/lib/hooks/use-viewport-units-fix.hook.ts b/src-ts/lib/hooks/use-viewport-units-fix.hook.ts
new file mode 100644
index 000000000..28fe6d629
--- /dev/null
+++ b/src-ts/lib/hooks/use-viewport-units-fix.hook.ts
@@ -0,0 +1,21 @@
+import { MutableRefObject, useRef } from 'react'
+
+import { useWindowSize, WindowSize } from './use-window-size.hook'
+
+/**
+ * On mobile, vh units are not consistent accross devices/browsers,
+ * this hook listen to window resize and fixes sets a --vh CSS variable
+ * on the document root, so we can access it everywhere
+ *
+ * @see https://css-tricks.com/the-trick-to-viewport-units-on-mobile
+ */
+export function useViewportUnitsFix(): void {
+    const { height }: WindowSize = useWindowSize()
+    const wasHeight: MutableRefObject<number> = useRef(height)
+
+    if (wasHeight.current !== height) {
+        // We execute the same script as before
+        const vh: number = window.innerHeight * 0.01
+        document.documentElement.style.setProperty('--vh', `${vh}px`)
+    }
+}
diff --git a/src-ts/lib/styles/_modals.scss b/src-ts/lib/styles/_modals.scss
index d8fef94a8..ee2d8b361 100644
--- a/src-ts/lib/styles/_modals.scss
+++ b/src-ts/lib/styles/_modals.scss
@@ -10,7 +10,7 @@
         display: flex;
         flex-direction: column;
         width: 100vw;
-        height: 100vh;
+        height: calc(var(--vh, 1vh) * 100);
         margin: auto;
         border-radius: 0;
         padding: $space-xxl $space-xxxxl $space-xxxxl;