From 078d8c07bb3333ce8f974ee81669bd67b836f9aa Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 7 Jan 2021 12:15:55 +0000
Subject: [PATCH] Fix: Text overlap in data table#961

fix: Text overlap in data table #961

This fix clamps the text to one line and hides the overflow with an ellipsis.
---
 .../backend/DataTable/TableHeader/TableHeader.svelte     | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
index 9588b34dd7..f6ef036f40 100644
--- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte
@@ -103,6 +103,15 @@
     opacity: 1;
   }
 
+  .column-header-name {
+    white-space: normal !important;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+  }
+
   .sort-icon {
     position: relative;
     top: 2px;