From aa3be12e4bc34d0ecdf9804042cdab94a19d9e4d Mon Sep 17 00:00:00 2001
From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com>
Date: Tue, 23 Apr 2024 08:49:05 +0300
Subject: [PATCH] Fix truncated line items on Line items table

---
 src/bill-history/bill-history.scss      | 16 +++++++++-------
 src/invoice/invoice-table.component.tsx |  5 ++++-
 src/invoice/invoice-table.scss          |  2 +-
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/bill-history/bill-history.scss b/src/bill-history/bill-history.scss
index e48dba7..84e127f 100644
--- a/src/bill-history/bill-history.scss
+++ b/src/bill-history/bill-history.scss
@@ -149,13 +149,15 @@
   table-layout: fixed; // This helps with uniform column sizing
   border-collapse: collapse;
 
-  th, td {
-    text-align: left;
-    padding: layout.$spacing-03; // Use a variable or a fixed value
-    border-bottom: 1px solid $ui-03;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+  td:has(:global(.billingTable)) {
+    td{
+      padding: 0.375rem 2rem 0.4375rem !important;
+      white-space:normal;
+      text-overflow: unset;
+    }
+  }
+  :global(tr.cds--parent-row.cds--expandable-row + tr[data-child-row]) td {
+    padding-left: 1rem;
   }
 }
 
diff --git a/src/invoice/invoice-table.component.tsx b/src/invoice/invoice-table.component.tsx
index 5015ce5..938e00c 100644
--- a/src/invoice/invoice-table.component.tsx
+++ b/src/invoice/invoice-table.component.tsx
@@ -159,7 +159,10 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
               placeholder={t('searchThisTable', 'Search this table')}
               size={responsiveSize}
             />
-            <Table {...getTableProps()} aria-label="Invoice line items" className={styles.table}>
+            <Table
+              {...getTableProps()}
+              aria-label="Invoice line items"
+              className={`${styles.invoiceTable} billingTable`}>
               <TableHead>
                 <TableRow>
                   {rows.length > 1 && isSelectable ? <TableHeader /> : null}
diff --git a/src/invoice/invoice-table.scss b/src/invoice/invoice-table.scss
index 89cb8f8..7a80a34 100644
--- a/src/invoice/invoice-table.scss
+++ b/src/invoice/invoice-table.scss
@@ -41,7 +41,7 @@
   }
 }
 
-.table {
+.invoiceTable {
   width: 100%;
   table-layout: fixed;
   border-collapse: collapse;