fix: TT-593 refactor

Author: wilc0519

src/app/modules/reports/components/time-entries-table/time-entries-table.component.html

@@ -26,7 +26,7 @@
     </thead>
     <app-loading-bar *ngIf="dataSource.isLoading"></app-loading-bar>
     <tbody *ngIf="!dataSource.isLoading">
-      <tr class="d-flex" *ngFor="let entry of dataSource.data">
+      <tr class="d-flex col-height" *ngFor="let entry of dataSource.data">
         <td class="hidden-col">{{ entry.id }}</td>
         <td class="col md-col">{{ entry.owner_email }}</td>
         <td class="col sm-col">
@@ -49,8 +49,8 @@
             </a>
           </ng-container>
         </td>
-        <td class="col lg-col">{{ entry.description }}</td>
-        <td class="col lg-col">
+        <td class="col lg-scroll">{{ entry.description }}</td>
+        <td class="col lg-scroll">
           <ng-container *ngIf="entry.technologies.length > 0">
               <div *ngFor="let technology of entry.technologies" class="badge bg-secondary text-wrap">
                   {{ technology }}

src/app/modules/reports/components/time-entries-table/time-entries-table.component.scss

@@ -2,9 +2,14 @@
 .col{
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
   font-size: small;
 }
+
+.col-height {
+  min-height: auto;
+  max-height: 8rem;
+}
+
 .x-sm-col{
   width: 5em;
   max-width: 7em;
@@ -23,6 +28,37 @@
   width: 12em;
   overflow: hidden;
   white-space: normal;
+  border: none;
+}
+
+@mixin scroll-style {
+  width: 40em;
+  overflow: hidden;
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  margin: 8px 10px 0px 10px;
+  border: none;
+  overflow-y: auto;
+  overflow-wrap: break-word;
+
+  &::-webkit-scrollbar {
+    width: 0.5em;
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #7a8486;
+    outline: 1px solid #7a8486;
+    border-radius: 0.5em;
+  }
+}
+
+.lg-scroll {
+  @include scroll-style;
 }
 .hidden-col{
   display: none;