(atlas) branch atlas-2.5 updated: ATLAS-5051: [React UI] Fix expand row icon width issue in table body (#370)

[ppawar]

This is an automated email from the ASF dual-hosted git repository.

ppawar pushed a commit to branch atlas-2.5
in repository https://gitbox.apache.org/repos/asf/atlas.git


The following commit(s) were added to refs/heads/atlas-2.5 by this push:
     new 2e65dc836 ATLAS-5051: [React UI] Fix expand row icon width issue in 
table body (#370)
2e65dc836 is described below

commit 2e65dc836a890c01b20ba66f9421a17fc32558ed
Author: Brijesh Bhalala <32086209+brijesh...@users.noreply.github.com>
AuthorDate: Mon Sep 8 17:28:58 2025 +0530

    ATLAS-5051: [React UI] Fix expand row icon width issue in table body (#370)
---
 dashboard/src/components/Table/TableLayout.tsx | 21 +++++++++++++--------
 dashboard/src/styles/table.scss                |  5 +++++
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/dashboard/src/components/Table/TableLayout.tsx 
b/dashboard/src/components/Table/TableLayout.tsx
index 41131fdd5..12dfa2cff 100644
--- a/dashboard/src/components/Table/TableLayout.tsx
+++ b/dashboard/src/components/Table/TableLayout.tsx
@@ -129,7 +129,7 @@ const Row = ({
     <>
       <TableRow hover key={row.id} onClick={handleRow}>
         {showRowSelection && (
-          <TableCell padding="checkbox" sx={{ width: "2%" }}>
+          <TableCell width="48">
             <IndeterminateCheckbox
               {...{
                 checked: row.getIsSelected(),
@@ -141,7 +141,7 @@ const Row = ({
           </TableCell>
         )}
         {expandRow && (
-          <TableCell padding="checkbox">
+          <TableCell width="48">
             <IconButton
               aria-label="expand row"
               size="small"
@@ -315,7 +315,10 @@ const DragAlongCell = ({
     <TableCell
       onClick={() => onClickRow?.(cell, row)}
       key={cell.id}
-      sx={{ padding: "8px", fontSize: "14px !important" }}
+      sx={{
+        padding: "8px",
+        fontSize: "14px !important"
+      }}
       className="text-[#2E353A] text-base font-graphik table-body-cell"
       style={style}
       ref={setNodeRef}
@@ -597,7 +600,11 @@ const TableLayout: FC<TableProps> = ({
               onDragEnd={handleDragEnd}
               sensors={sensors}
             >
-              <MuiTable size="small" className="table">
+              <MuiTable
+                size="small"
+                className="table expand-row-table"
+                sx={{ tableLayout: "fixed", width: "100%" }}
+              >
                 {!isFetching && (
                   <TableHead>
                     {getHeaderGroups().map((headerGroup) => (
@@ -607,7 +614,7 @@ const TableLayout: FC<TableProps> = ({
                         className="table-header-row"
                       >
                         {showRowSelection && (
-                          <TableCell padding="checkbox">
+                          <TableCell width="48">
                             <IndeterminateCheckbox
                               {...{
                                 checked: getIsAllRowsSelected(),
@@ -617,9 +624,7 @@ const TableLayout: FC<TableProps> = ({
                             />
                           </TableCell>
                         )}
-                        {expandRow && (
-                          <TableCell sx={{ width: "2%" }} padding="checkbox" />
-                        )}
+                        {expandRow && <TableCell width="48" />}
                         <SortableContext
                           items={columnOrder}
                           strategy={horizontalListSortingStrategy}
diff --git a/dashboard/src/styles/table.scss b/dashboard/src/styles/table.scss
index e9b35cfb7..4f60f05b0 100644
--- a/dashboard/src/styles/table.scss
+++ b/dashboard/src/styles/table.scss
@@ -253,3 +253,8 @@ td:has(.searchTableName) {
   gap: 0.5rem;
   cursor: pointer;
 }
+
+.expand-row-table td:not(:first-child),
+.expand-row-table th:not(:first-child) {
+  width: 100% !important;
+}