Merge pull request #581 from topcoder-platform/TCA-1186_completion-screen-mobile-fixes

TCA-1186 - fix issues on mobile for course completed screen -> dev

Author: vas3a

src-ts/lib/breadcrumb/Breadcrumb.module.scss

@@ -40,8 +40,8 @@
             padding: 0;
             @include ltesm {
                 flex: 0 1 auto;
-                &:first-child {
-                    flex: 1 0 auto;
+                &:first-child:not(:global(.elipsis)) {
+                    flex: 1 0 0;
                 }
             }
             a {

src-ts/lib/breadcrumb/breadcrumb-item/BreadcrumbItem.tsx

@@ -19,10 +19,11 @@ const BreadcrumbItem: FC<BreadcrumbItemProps> = (props: BreadcrumbItemProps) =>
     return (
         <li
             key={props.index}
-            onClick={() => onClick()}
+            onClick={onClick}
+            className={props.item.isElipsis ? 'elipsis' : ''}
         >
             <Link
-                className={props.item.isElipsis && styles.elipsis}
+                className={props.item.isElipsis ? styles.elipsis : ''}
                 to={props.item.url}
             >
                 {props.item.name}

src-ts/tools/learn/course-completed/tca-certification-view/TCACertificationView.tsx

@@ -1,9 +1,8 @@
 import { FC } from 'react'
 
-import { EnvironmentConfig } from '../../../../config'
 import { Button } from '../../../../lib'
 import { CourseTitle, LearnCourse, TCACertification } from '../../learn-lib'
-import { getCertificatePath, getTCACertificationPath, rootRoute } from '../../learn.routes'
+import { getTCACertificationPath } from '../../learn.routes'
 import { ReactComponent as StarsSvg } from '../stars.svg'
 import { TitleBadgeType } from '../../learn-lib/course-title/CourseTitle'
 import styles from '../CourseCompletedPage.module.scss'

src-ts/tools/learn/learn-lib/course-title/CourseTitle.module.scss

@@ -61,6 +61,8 @@
     @include ltemd {
         :global(.quote-small.xl) {
             margin-top: $space-sm;
+            display: flex;
+            justify-content: center;
         }
     }
 }