fix: Better map popup layout

src/app/dashboard/components/map/map.component.scss

@@ -5,6 +5,18 @@ hslayers {
   width: 100%;
 }
 
+::ng-deep .hsl .hs-hover-popup {
+  overflow-y: auto;
+}
+
+::ng-deep .hs-hover-popup table {
+  margin: 15px 10px 15px 10px;
+}
+
+::ng-deep .hs-hover-popup table td, .hs-hover-popup table th {
+  padding: 5px;
+}
+
 ::ng-deep a.white, ::ng-deep a.white:hover {
   color: #ffffff;
 }

src/app/dashboard/components/map/map.component.ts

@@ -197,11 +197,17 @@ export class MapComponent implements OnInit, OnDestroy, OnChanges {
       properties: {
         popUp: {
           displayFunction: function (feature) {
-            return `<ul>
-              <li>Unit name &nbsp; ${feature.get('title')}</li>
-              <li>Unit ID &nbsp; ${feature.get('id')}</li>
-            </ul>
-            <button class="p-button-primary" style="display: block; margin: auto;"><a class="white" href="/dashboard/unit/${feature.get('id')}?unitDescription=${feature.get('title')}" target="_blank">Open Unit detail...</a></button>
+            return `<table>
+              <tr>
+                <th>Unit name</th>
+                <td>${feature.get('title')}</td>
+              </tr>
+              <tr>
+                <th>Unit ID</th>
+                <td>${feature.get('id')}</td>
+              </tr>
+            </table>
+            <button class="p-button-primary" style="display: block; margin: auto; margin-bottom: 10px;"><a class="white" href="/dashboard/unit/${feature.get('id')}?unitDescription=${feature.get('title')}" target="_blank">Open Unit detail...</a></button>
             `;
           }
         //  attributes: [