SP-563 Fixes visualization issues in HTML report

Author: agustingroh

Diff for: CHANGELOG.md

@@ -2,7 +2,7 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [0.11.5](https://github.com/scanoss/scanoss.js/compare/v0.11.4...v0.11.5) (2024-04-17)
+### [0.11.5](https://github.com/scanoss/scanoss.js/compare/v0.11.4...v0.11.5) (2024-04-19)
 
 ### [0.11.4](https://github.com/scanoss/scanoss.js/compare/v0.11.3...v0.11.4) (2024-04-02)
 

Diff for: assets/ReportHTMLTemplate/index.html

@@ -322,14 +322,20 @@
     color: rgb(24, 24, 27)
   }
 
+  .info .v-label{
+    justify-content: flex-end;
+  }
+
+  .info .v-value{
+    justify-content: flex-end;
+  }
+
   .row-license-info-container {
-    display: flex;
     width: 100%;
   }
 
   td.cell-info-container {
-    width: 30%;
-    display: flex;
+    word-break: break-word;
   }
 
   td.cell-info-container:last-child {
@@ -341,8 +347,12 @@
   }
 
   td.cell-info-container.index {
-    width: 10%;
+    width: 50px;
+  }
 
+  td.cell-info-container.version {
+    width: 20%;
+    word-break: break-all;
   }
 
   .row-info-container {
@@ -446,6 +456,11 @@
   table.main-table td:first-child {
     font-weight: 600;
   }
+
+  #table-components td, #table-dependencies td, #table-components td, #table-cryptography td  {
+    word-break: break-word;
+  }
+
 </style>
 
 
@@ -985,14 +1000,14 @@ <h4>License obligations</h4>
                                                                           </div>
                                                                           </div>
                                                                       </td>
-                                                                      <td class="cell-info-container">
+                                                                      <td class="cell-info-container version">
                                                                       <div class="row-info-container">
                                                                           <div class="info">
-                                                                              <div class="label">
+                                                                              <div class="label v-label">
                                                                                   ${c.versions.length > 1 ? 'Versions' : 'Version'}
                                                                               </div>
-                                                                              <div class="value small">
-                                                                                  ${c.versions.toString()}
+                                                                              <div class="value small v-value">
+                                                                                  ${c.versions.join(', ').toString()}
                                                                               </div>
                                                                           </div>
                                                                           </div>