fix(DataTable): fix cell size and border in FF

- add classes for (header) cell containers
- fix cell height size
- tune up tests, stories, and snapshots

src/components/DataTable/DataTable.module.css

@@ -36,27 +36,27 @@
 }
 
 .data-table__table {
+  height: fit-content;
   table-layout: fixed;
   width: 100%;
 
-  /* add class instead of tag for styles? */
-  th,
-  td {
-    padding: 0;
-    vertical-align: top;
-    /**
-     * inherit height from 1px size of table rows. This allows height: 100% on cells containers
-     *  to affect full height of cell
-     */
-    height: inherit;
-  }
-
   .data-table__caption + &,
   .data-table__subcaption + & {
     margin-top: calc(var(--eds-size-4) / 16 * 1rem);
   }
 }
 
+.data-table__cell-container, .data-table__header-cell-container {
+  padding: 0;
+  vertical-align: top;
+
+  &:last-child {
+    .data-table__cell, .data-table__header-cell {
+      border-width: 0;
+    }
+  }
+}
+
 .data-table__search {
   width: calc(var(--eds-size-34) / 16 * 1rem);
 }
@@ -193,8 +193,7 @@
  */
 
 .data-table__row {
-  /* setting the height to 1px so that later, table cell containers can take up 100% of height */
-  height: 1px;
+  height: 100%;
 
   &.data-table__row--is-selected {
     background-color: var(--eds-theme-color-background-table-row-selected);

src/components/DataTable/DataTable.stories.tsx

@@ -708,7 +708,7 @@ export const DefaultWithCustomTable: StoryObj<Args> = {
       <table>
         <tbody className="border-2 border-utility-default-lowEmphasis-hover">
           <tr>
-            <td>TODO: Custom table rows/cells here</td>
+            <td>Custom or standard table rows/cells here</td>
           </tr>
         </tbody>
       </table>

src/components/DataTable/DataTable.tsx

@@ -213,6 +213,7 @@ export function DataTable<T>({
               <DataTableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => (
                   <th
+                    className={styles['data-table__header-cell-container']}
                     colSpan={header.colSpan}
                     key={header.id}
                     style={{
@@ -243,7 +244,10 @@ export function DataTable<T>({
                       {row.getLeafRows().map((row) => (
                         <DataTableRow key={row.id}>
                           {row.getVisibleCells().map((cell) => (
-                            <td key={cell.id}>
+                            <td
+                              className={styles['data-table__cell-container']}
+                              key={cell.id}
+                            >
                               {flexRender(
                                 cell.column.columnDef.cell,
                                 cell.getContext(),
@@ -259,7 +263,10 @@ export function DataTable<T>({
                       isSelected={row.getIsSelected()}
                     >
                       {row.getVisibleCells().map((cell) => (
-                        <td key={cell.id}>
+                        <td
+                          className={styles['data-table__cell-container']}
+                          key={cell.id}
+                        >
                           {flexRender(
                             cell.column.columnDef.cell,
                             cell.getContext(),