From 6b5aa05e8bb54dc7b7a176bc249e2d226cfdc4a0 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Tue, 7 Jan 2025 14:03:51 +0100
Subject: [PATCH] fix(table): prevent random large font-sizes in iOS & truncate
 strings

In some scenarios, a table cell could suddenly get a really large
font-size. Seemingly this happened when for contents
with many characters.
However, the issue was not the `font-size` property itself.
It was likely due to some Safari-related bug, which had to do with
`display: inline-flex` of table cells, and or combination of it with
some other styles in Tabulator. Usage of `inline-flex` also
caused text not to be truncated in any cells.
Both problems are fixed now.
---
 .../table/partial-styles/_row-selection.scss  | 27 +++++++++----------
 src/components/table/table.scss               |  3 ---
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/table/partial-styles/_row-selection.scss b/src/components/table/partial-styles/_row-selection.scss
index e32edcd72e..fda713d609 100644
--- a/src/components/table/partial-styles/_row-selection.scss
+++ b/src/components/table/partial-styles/_row-selection.scss
@@ -2,34 +2,34 @@
 
 // .has-rowselector {} // Mabe useful later
 
+$checkbox-distance-to-left-edge: 0.5rem;
+
 .select-all,
 .limel-table--row-selector {
-    --mdc-checkbox-touch-target-size: 1.125rem; // prevent the checkbox affecting the row height
-    limel-checkbox {
-        min-height: 1.125rem;
-    }
+    // prevent the checkbox affecting the row height
+    --mdc-checkbox-touch-target-size: 1.125rem;
+    --mdc-checkbox-ripple-size: 2.5rem;
 }
 
 .select-all {
     position: absolute;
     z-index: $table--limel-table--row-selector;
-    left: 0;
+    left: $checkbox-distance-to-left-edge;
     top: functions.pxToRem(6);
-    width: functions.pxToRem(41); // width of the selector column
-
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
 }
 
 .limel-table--row-selector {
     position: sticky !important; // otherwise will be overwritten from `.tabulator-row .tabulator-cell`
     left: 0;
     border-width: 0;
-    justify-content: center;
     z-index: $table--limel-table--row-selector;
-    padding-right: 0 !important;
-    padding-left: 0 !important;
+
+    text-overflow: unset !important; // Otherwise a `…` will be rendered besides the checkbox, since we truncate all cells
+    padding-left: $checkbox-distance-to-left-edge !important;
+
+    limel-checkbox {
+        margin-top: functions.pxToRem(1);
+    }
 
     .tabulator-row-odd & {
         background-image: linear-gradient(
@@ -66,7 +66,6 @@
 
     limel-checkbox {
         transition: opacity 0.2s ease;
-        align-self: center;
         opacity: 0.3;
 
         .tabulator-row:hover & {
diff --git a/src/components/table/table.scss b/src/components/table/table.scss
index bca0c88113..cd172b9884 100644
--- a/src/components/table/table.scss
+++ b/src/components/table/table.scss
@@ -120,8 +120,6 @@ $table--limel-table--row-selector: 1;
         padding: $cell-padding;
         padding-left: $cell-padding + $width-of-sorter-arrow;
 
-        display: inline-flex;
-        align-items: center;
         min-height: inherit;
 
         &[style*='text-align: right;'] {
@@ -140,7 +138,6 @@ $table--limel-table--row-selector: 1;
 .tabulator-col,
 .tabulator-cell {
     max-width: var(--table-max-column-width, 40rem);
-    font-size: functions.pxToRem(13);
 }
 
 #tabulator-loader,