From 17d97b8ba24b3d1591f9895319a40ed06c4755a1 Mon Sep 17 00:00:00 2001
From: Giroscope <giraudloris.the@gmail.com>
Date: Mon, 5 Feb 2024 10:26:00 +0100
Subject: [PATCH] fix(table): fix cell size / add text-overflow: clip /
 minimize "type"/"mode"/"interval" column / define first/last cell size

---
 .../history-query-items.component.html        |  4 ++--
 .../history-query-list.component.html         | 20 ++++++++++---------
 .../history-query-list.component.spec.ts      |  4 ++--
 .../src/app/north/north-list.component.html   | 13 +++++++-----
 .../south-detail/south-detail.component.html  |  2 +-
 .../south-items/south-items.component.html    |  6 +++---
 .../src/app/south/south-list.component.html   | 13 +++++++-----
 frontend/src/styles.scss                      |  7 +++++++
 8 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/history-query/history-query-items/history-query-items.component.html b/frontend/src/app/history-query/history-query-items/history-query-items.component.html
index c1a489db7e..2e94cf96f1 100644
--- a/frontend/src/app/history-query/history-query-items/history-query-items.component.html
+++ b/frontend/src/app/history-query/history-query-items/history-query-items.component.html
@@ -60,10 +60,10 @@
       <table class="table table-sm table-hover oib-table">
         <thead class="light">
           <tr>
-            <th *ngIf="!inMemory" style="width: 3%"></th>
+            <th *ngIf="!inMemory"></th>
             <th translate="history-query.items.name"></th>
             <th *ngFor="let setting of displaySettings">{{ setting.label }}</th>
-            <th style="width: 3%"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/app/history-query/history-query-list.component.html b/frontend/src/app/history-query/history-query-list.component.html
index 609464b771..00b488a2fe 100644
--- a/frontend/src/app/history-query/history-query-list.component.html
+++ b/frontend/src/app/history-query/history-query-list.component.html
@@ -45,11 +45,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="history-query.name" style="width: 10%"></th>
-            <th translate="history-query.interval" style="width: 25%"></th>
-            <th translate="history-query.description" style="width: 60%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="history-query.name"></th>
+            <th translate="history-query.interval" style="width: 22rem"></th>
+            <th translate="history-query.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -58,10 +58,12 @@ <h1 class="oib-title">
               <div [class]="getStatusClass(query.status)"></div>
             </td>
             <td>{{ query.name }}</td>
-            <td class="d-flex">
-              <div>{{ query.startTime | datetime:'ff' }}</div>
-              <div class="fa fa-arrow-right oib-fa-arrow"></div>
-              <div>{{ query.endTime | datetime:'ff' }}</div>
+            <td>
+              <div>
+                {{ query.startTime | datetime:'ff' }}
+                <div class="fa fa-arrow-right oib-fa-arrow"></div>
+                {{ query.endTime | datetime:'ff' }}
+              </div>
             </td>
             <td>{{ query.description }}</td>
             <td class="text-nowrap action-buttons">
diff --git a/frontend/src/app/history-query/history-query-list.component.spec.ts b/frontend/src/app/history-query/history-query-list.component.spec.ts
index cd907f7bce..e7af504dee 100644
--- a/frontend/src/app/history-query/history-query-list.component.spec.ts
+++ b/frontend/src/app/history-query/history-query-list.component.spec.ts
@@ -73,12 +73,12 @@ describe('HistoryQueryListComponent', () => {
     expect(tester.title).toContainText('History queries');
     expect(tester.historyQueryList.length).toBe(2);
     expect(tester.historyQueryList[0].elements('td')[1]).toContainText(historyQueries[0].name);
-    expect(tester.historyQueryList[0].elements('td')[2]).toContainText('2 Feb 2020, 03:022 Feb 2022, 03:02');
+    expect(tester.historyQueryList[0].elements('td')[2]).toContainText(' 2 Feb 2020, 03:02  2 Feb 2022, 03:02 ');
     expect(tester.historyQueryList[0].elements('td')[3]).toContainText(historyQueries[0].description);
     expect(tester.historyQueryList[0].elements('td')[4].elements('button').length).toBe(2);
     expect(tester.historyQueryList[0].elements('td')[4].elements('a').length).toBe(3);
     expect(tester.historyQueryList[1].elements('td')[1]).toContainText(historyQueries[1].name);
-    expect(tester.historyQueryList[1].elements('td')[2]).toContainText('2 Feb 2020, 03:022 Feb 2022, 03:02');
+    expect(tester.historyQueryList[1].elements('td')[2]).toContainText(' 2 Feb 2020, 03:02  2 Feb 2022, 03:02 ');
     expect(tester.historyQueryList[1].elements('td')[3]).toContainText(historyQueries[1].description);
     expect(tester.historyQueryList[1].elements('td')[4].elements('button').length).toBe(2);
     expect(tester.historyQueryList[1].elements('td')[4].elements('a').length).toBe(3);
diff --git a/frontend/src/app/north/north-list.component.html b/frontend/src/app/north/north-list.component.html
index 81799a4c01..bfa3a2b9ed 100644
--- a/frontend/src/app/north/north-list.component.html
+++ b/frontend/src/app/north/north-list.component.html
@@ -1,3 +1,6 @@
+<script>
+  $('').tooltip(options);
+</script>
 <div class="oib-padded-container">
   <div class="d-flex">
     <div class="oib-title-container mb-3">
@@ -45,11 +48,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="north.name" style="width: 10%"></th>
-            <th translate="north.type" style="width: 10%"></th>
-            <th translate="north.description" style="width: 70%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="north.name"></th>
+            <th translate="north.type" style="width: 9rem"></th>
+            <th translate="north.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/app/south/south-detail/south-detail.component.html b/frontend/src/app/south/south-detail/south-detail.component.html
index 83e052c9a7..1141302673 100644
--- a/frontend/src/app/south/south-detail/south-detail.component.html
+++ b/frontend/src/app/south/south-detail/south-detail.component.html
@@ -54,7 +54,7 @@ <h1 id="title" translate="south.title" [translateParams]="{ name: southConnector
               <td>{{ southConnector.enabled | enabled }}</td>
             </tr>
             <tr *ngFor="let setting of displayedSettings">
-              <td style="width: 33%">{{ setting.key }}</td>
+              <td>{{ setting.key }}</td>
               <td>{{ setting.value }}</td>
             </tr>
           </tbody>
diff --git a/frontend/src/app/south/south-items/south-items.component.html b/frontend/src/app/south/south-items/south-items.component.html
index 443bdf991d..3b35a7c944 100644
--- a/frontend/src/app/south/south-items/south-items.component.html
+++ b/frontend/src/app/south/south-items/south-items.component.html
@@ -60,11 +60,11 @@
       <table class="mb-2 table table-sm table-hover oib-table">
         <thead class="light">
           <tr>
-            <th *ngIf="!inMemory" style="width: 3%"></th>
+            <th *ngIf="!inMemory"></th>
             <th translate="south.items.name"></th>
-            <th *ngIf="!southManifest.items.scanMode.subscriptionOnly" translate="south.items.scan-mode"></th>
+            <th *ngIf="!southManifest.items.scanMode.subscriptionOnly" translate="south.items.scan-mode" style="width: 8rem"></th>
             <th *ngFor="let setting of displaySettings">{{ setting.label }}</th>
-            <th style="width: 3%"></th>
+            <th style="width: 6rem"></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/app/south/south-list.component.html b/frontend/src/app/south/south-list.component.html
index d0a0f79b12..2c8f2accba 100644
--- a/frontend/src/app/south/south-list.component.html
+++ b/frontend/src/app/south/south-list.component.html
@@ -1,3 +1,6 @@
+<script>
+  $('#test').tooltip(options);
+</script>
 <div class="oib-padded-container">
   <div class="d-flex">
     <div class="oib-title-container mb-3">
@@ -45,11 +48,11 @@ <h1 class="oib-title">
       <table class="mt-2 table table-sm table-hover oib-table">
         <thead>
           <tr>
-            <th style="width: 1%"></th>
-            <th translate="south.name" style="width: 10%"></th>
-            <th translate="south.type" style="width: 10%"></th>
-            <th translate="south.description" style="width: 70%"></th>
-            <th style="width: 3%"></th>
+            <th></th>
+            <th translate="south.name"></th>
+            <th translate="south.type" style="width: 9rem"></th>
+            <th translate="south.description"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 6ba5802e65..dff45dbc6e 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -208,10 +208,12 @@ img.oib-image-header {
     // first case of the first line
     th:first-child {
       border-top-left-radius: 1rem;
+      width: 3rem;
     }
     // last case of the first line
     th:last-child {
       border-top-right-radius: 1rem;
+      width: 9rem;
     }
     // alternative case if oib-box-title is on top of table
     .light {
@@ -226,6 +228,10 @@ img.oib-image-header {
       vertical-align: middle;
       padding-left: 1rem;
       border-bottom-width: 0;
+      max-width: 0;
+      text-overflow: clip;
+      overflow: hidden;
+      white-space: nowrap;
     }
     // line
     tr {
@@ -247,6 +253,7 @@ img.oib-image-header {
       td:last-child {
         text-align: right;
         padding-right: 1em;
+        overflow: visible;
       }
     }
     // customised colours on the lines (one out of two)