Solution of overflow large word done (#853)

Author: Olucas7

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

@@ -20,7 +20,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">
@@ -43,8 +43,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,7 +28,39 @@
   width: 12em;
   overflow: hidden;
   white-space: normal;
+  border: none;
+}
+
+@mixin scroll-style {
+  width: 18em;
+  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;
 }