From b0c4db3ca2c0d3678223e5ebd8ddb5b32cba52e4 Mon Sep 17 00:00:00 2001
From: Carlo Minotti <50220438+minottic@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:35:36 +0100
Subject: [PATCH 1/4] Extend scrolling to firefox

* Extend scrolling to firefox
* Decrease rows height
* Decrease image size
* Fit whole viewport
---
 .../overview-table.component.scss             | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/scilog/src/app/overview/overview-table/overview-table.component.scss b/scilog/src/app/overview/overview-table/overview-table.component.scss
index a503227e..c756c3c2 100644
--- a/scilog/src/app/overview/overview-table/overview-table.component.scss
+++ b/scilog/src/app/overview/overview-table/overview-table.component.scss
@@ -3,13 +3,6 @@ table {
   table-layout: fixed;
 }
 
-table th, 
-table td {
-  white-space: nowrap;
-  overflow: scroll;
-}
-
-
 .logbooks:hover {
   background-color: var(--main-background)!important;
   -webkit-transition: background-color 100ms linear, color 100ms linear;
@@ -18,11 +11,18 @@ table td {
 }
 
 .logbooks {
-  height: 65px;
+  height: 50px;
+}
+
+.scrollable-text {
+  white-space: nowrap;
+  overflow: scroll;
+  margin-right: 10px;
+  scrollbar-width: none;
 }
 
 .logbooks img {
-  max-height: 60px;
+  max-height: 45px;
   object-fit: contain;
 }
 
@@ -34,7 +34,7 @@ table td {
 }
 
 .scrollable-container {
-  max-height: 65px * 11;
+  max-height: calc(100vh - 250px);
   width: 100%;
   overflow: auto;
 }

From 7619bfc43788f1e5ca65646854b5612cd38fb122 Mon Sep 17 00:00:00 2001
From: Carlo Minotti <50220438+minottic@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:37:41 +0100
Subject: [PATCH 2/4] Apply css to table HTML

---
 .../overview-table.component.html             | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/scilog/src/app/overview/overview-table/overview-table.component.html b/scilog/src/app/overview/overview-table/overview-table.component.html
index aa1c7615..b6535aac 100644
--- a/scilog/src/app/overview/overview-table/overview-table.component.html
+++ b/scilog/src/app/overview/overview-table/overview-table.component.html
@@ -3,27 +3,43 @@
     (cdkDropListDropped)="drop($event)" (matSortChange)="onSortChange()">
     <ng-container matColumnDef="name">
       <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Title </th>
-      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+      <td mat-cell *matCellDef="let row"> 
+        <div class="scrollable-text"> 
+          {{row.name}}
+        </div>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="description">
       <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Description </th>
-      <td mat-cell *matCellDef="let row"> {{row.description}} </td>
+      <td mat-cell *matCellDef="let row"> 
+        <div class="scrollable-text"> 
+          {{row.description}} 
+        </div>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="ownerGroup">
       <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>ownerGroup </th>
-      <td mat-cell *matCellDef="let row"> {{row.ownerGroup}} </td>
+      <td mat-cell *matCellDef="let row"> 
+        <div class="scrollable-text"> 
+          {{row.ownerGroup}} 
+        </div>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="createdAt">
       <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>Date </th>
-      <td mat-cell *matCellDef="let row"> {{row.createdAt | date}} </td>
+      <td mat-cell *matCellDef="let row"> 
+        <div class="scrollable-text"> 
+          {{row.createdAt | date}} 
+        </div>
+      </td>
     </ng-container>
 
     <ng-container matColumnDef="thumbnail">
       <th mat-header-cell cdkDrag *matHeaderCellDef>Thumbnail </th>
-      <td mat-cell *matCellDef="let row"><img [src]="getImage(row.thumbnail)" style="height: 100%;" /> </td>
+      <td mat-cell *matCellDef="let row"><img [src]="getImage(row.thumbnail)" style="height: 100%;"/> </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">

From 3122756c2b5a3a1ddbb48d8810955174e4cbe60b Mon Sep 17 00:00:00 2001
From: Carlo Minotti <50220438+minottic@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:41:04 +0100
Subject: [PATCH 3/4] Improve image sizing

---
 .../app/overview/overview-table/overview-table.component.html   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scilog/src/app/overview/overview-table/overview-table.component.html b/scilog/src/app/overview/overview-table/overview-table.component.html
index b6535aac..f6bd2ff5 100644
--- a/scilog/src/app/overview/overview-table/overview-table.component.html
+++ b/scilog/src/app/overview/overview-table/overview-table.component.html
@@ -39,7 +39,7 @@
 
     <ng-container matColumnDef="thumbnail">
       <th mat-header-cell cdkDrag *matHeaderCellDef>Thumbnail </th>
-      <td mat-cell *matCellDef="let row"><img [src]="getImage(row.thumbnail)" style="height: 100%;"/> </td>
+      <td mat-cell *matCellDef="let row"><img [src]="getImage(row.thumbnail)"/> </td>
     </ng-container>
 
     <ng-container matColumnDef="actions">

From de7796a47de02c38268ccb5072b05aa0c9adee21 Mon Sep 17 00:00:00 2001
From: Carlo Minotti <50220438+minottic@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:45:20 +0100
Subject: [PATCH 4/4] Add margin to image

---
 .../app/overview/overview-table/overview-table.component.scss   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/scilog/src/app/overview/overview-table/overview-table.component.scss b/scilog/src/app/overview/overview-table/overview-table.component.scss
index c756c3c2..e25a1e39 100644
--- a/scilog/src/app/overview/overview-table/overview-table.component.scss
+++ b/scilog/src/app/overview/overview-table/overview-table.component.scss
@@ -23,6 +23,8 @@ table {
 
 .logbooks img {
   max-height: 45px;
+  height: 100%;
+  margin-top: 2px;
   object-fit: contain;
 }