PROD-2799 #comment Fix details view UI issue in mobile

Author: asadath1395

src-ts/tools/work/work-detail-summary/WorkDetailHighlights/WorkDetailHighlights.module.scss

@@ -7,14 +7,15 @@ $icon-size: calc($space-xxl * 2);
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     margin-bottom: $space-xxl;
+    overflow: auto;
 
     .highlight {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
         text-align: center;
-        margin-right: calc($border-xs * -1);
+        margin-right: 0;
         padding: $space-lg;
         border-left: $border-xs solid $black-10;
         border-right: $border-xs solid $black-10;

src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgress.module.scss

@@ -15,6 +15,5 @@
         display: flex;
         justify-content: space-between;
         margin-top: calc($space-lg + $space-xxl);
-        margin-left: calc($space-xxxxl - $border);
     }
 }

src-ts/tools/work/work-detail-summary/WorkDetailProgress/WorkDetailProgressItem/WorkDetailProgressItem.module.scss

@@ -4,19 +4,23 @@ $dot-size: calc($space-lg + $space-xxl);
 
 .progress-bar-list-item {
     position: relative;
-    width: 25%;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     &:last-child {
-        width: auto;
+        flex: 1;
     }
 
     .label {
         display: block;
         margin-top: $space-sm;
         margin-left: calc(-1 * calc($dot-size + 3px));
-        width: calc(4 * $space-xxxxl);
+        width: auto;
         text-align: center;
         color: $black-60;
+        margin: 0;
 
         span {
             display: block;
@@ -40,17 +44,19 @@ $dot-size: calc($space-lg + $space-xxl);
         border-radius: 50%;
         box-sizing: border-box;
         color: $black-60;
+        z-index: 10;
     }
 
     &:not(:last-child):after {
         content: '';
         display: block;
         position: absolute;
         top: $space-lg;
-        left: $dot-size;
+        left: 54%;
         width: 100%;
         height: $space-sm;
         @extend .bg-black-20;
+        z-index: 1;
     }
 
     &.active {