fix(data set table): ensure 480px max-width rule works

dhis2 · Sep 30, 2021 · 6377e6a · 6377e6a
1 parent 62432f9
commit 6377e6a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/data-workspace/display/table.js b/src/data-workspace/display/table.js
@@ -31,11 +31,19 @@ const Table = ({ title, columns, rows }) => (
             <TableHead>
                 <DataTableToolbar columns={columns.length}>{title}</DataTableToolbar>
                 <DataTableRow>
-                    {columns.map(column => (
-                        <DataTableColumnHeader key={column}>
-                            {column}
-                        </DataTableColumnHeader>
-                    ))}
+                    <DataTableColumnHeader className={styles.cell}>
+                        <span className={styles.labelCellContent}>
+                            {columns[0]}
+                        </span>
+                    </DataTableColumnHeader>
+
+                    {columns.slice(1).map(column => {
+                        return (
+                            <DataTableColumnHeader key={column} className={styles.cell}>
+                                {column}
+                            </DataTableColumnHeader>
+                        )
+                    })}
                 </DataTableRow>
             </TableHead>
             <TableBody>
@@ -44,12 +52,14 @@ const Table = ({ title, columns, rows }) => (
 
                     return (
                         <DataTableRow key={index}>
-                            <DataTableCell className={styles.labelCell}>
-                                {firstCell}
+                            <DataTableCell className={styles.cell}>
+                                <span className={styles.labelCellContent}>
+                                    {firstCell}
+                                </span>
                             </DataTableCell>
 
                             {cells.map((value, index) => (
-                                <DataTableCell key={index}>
+                                <DataTableCell key={index} className={styles.cell}>
                                     {value}
                                 </DataTableCell>
                             ))}

diff --git a/src/data-workspace/display/table.module.css b/src/data-workspace/display/table.module.css
@@ -9,6 +9,14 @@ table.dataTable {
     width: auto;
 }
 
-td.labelCell {
+th.cell, td.cell {
+    height: auto;
+    min-height: 45px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+.labelCellContent, .labelCellContent {
+    display: block;
     max-width: 480px;
 }