From e36933986895dcf81bddc4eb86ee750f871db4e3 Mon Sep 17 00:00:00 2001
From: Karine Brandelli Padilha <karine.padilha@ngi.com.br>
Date: Wed, 30 Sep 2026 16:59:04 -0300
Subject: [PATCH] fix: table layout

---
 CHANGELOG.md                                  |  5 ++++
 package.json                                  |  2 +-
 .../table-interactive.spec.tsx                |  4 +--
 src/core/data-display/table/styles.ts         |  1 +
 src/theme/theme.spec.tsx                      | 29 +++++++++++++++++++
 src/theme/theme.ts                            | 10 +++++++
 6 files changed, 48 insertions(+), 3 deletions(-)
 create mode 100644 src/theme/theme.spec.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 87b0208d..9fcda17b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v0.42.1
+
+- fix the sticky head cell of the tables painting `background.default` instead of white; `muiThemeOptions` now overrides `MuiTableCell.stickyHeader` with `neutral[50]`
+- fix the `stickyFooter` pagination drawing a bottom border under the stuck cell
+
 ## v0.42.0
 
 - add `stickyFooter` prop to `<DataTable>` and `<TableInteractive>`, pinning the pagination to the bottom of the scroll container while the rows scroll under it; like `stickyHeader`, it needs `maxHeight` to scroll within and flips the table to `border-collapse: separate`, so the stuck footer paints its own white background and `gray[200]` shadow
diff --git a/package.json b/package.json
index ccee37d1..071ce934 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.42.0",
+    "version": "0.42.1",
     "author": "NG",
     "license": "MIT",
     "main": "dist/index.js",
diff --git a/src/core/data-display/table-interactive/table-interactive.spec.tsx b/src/core/data-display/table-interactive/table-interactive.spec.tsx
index 0bb01797..e168e46d 100644
--- a/src/core/data-display/table-interactive/table-interactive.spec.tsx
+++ b/src/core/data-display/table-interactive/table-interactive.spec.tsx
@@ -593,8 +593,8 @@ describe('STICKY_FOOTER', () => {
         expect(footer.backgroundColor).toBe('#FFFFFF')
     })
 
-    it('should draw the divider with a shadow, not a border', () => {
-        expect(footer).not.toHaveProperty('borderBottom')
+    it('should draw the divider with a shadow and drop the cell bottom border', () => {
+        expect(footer.borderBottom).toBe('none')
         expect(footer.boxShadow).toContain(`0 -1px 0 ${theme.colors.gray[200]}`)
     })
 })
diff --git a/src/core/data-display/table/styles.ts b/src/core/data-display/table/styles.ts
index d7168bbb..db581f39 100644
--- a/src/core/data-display/table/styles.ts
+++ b/src/core/data-display/table/styles.ts
@@ -46,6 +46,7 @@ export const STICKY_FOOTER = {
         zIndex: 2,
         bottom: 0,
         position: 'sticky',
+        borderBottom: 'none',
         backgroundColor: neutral[50],
         boxShadow: `0 -1px 0 ${gray[200]}, 0 -4px 12px ${alpha(gray[800], 0.04)}`
     }
diff --git a/src/theme/theme.spec.tsx b/src/theme/theme.spec.tsx
new file mode 100644
index 00000000..10a107f8
--- /dev/null
+++ b/src/theme/theme.spec.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import MuiTable from '@mui/material/Table'
+import MuiTableCell from '@mui/material/TableCell'
+import MuiTableHead from '@mui/material/TableHead'
+import MuiTableRow from '@mui/material/TableRow'
+import { render } from '@testing-library/react'
+import { muiThemeOptions } from './theme'
+import ThemeProviderFlipper from './ThemeProvider'
+
+describe('muiThemeOptions', () => {
+    it('should paint the sticky head cell white instead of background.default', () => {
+        const { container } = render(
+            <ThemeProviderFlipper options={muiThemeOptions}>
+                <MuiTable stickyHeader>
+                    <MuiTableHead>
+                        <MuiTableRow>
+                            <MuiTableCell>Head</MuiTableCell>
+                        </MuiTableRow>
+                    </MuiTableHead>
+                </MuiTable>
+            </ThemeProviderFlipper>
+        )
+        const cell = container.querySelector('th') as HTMLElement
+
+        expect(getComputedStyle(cell).backgroundColor).toBe(
+            'rgb(255, 255, 255)'
+        )
+    })
+})
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 785a0b5d..e846becf 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -27,6 +27,16 @@ export const muiThemeOptions = {
             defaultProps: {
                 variantMapping
             }
+        },
+        // a sticky head cell needs an opaque background or the rows scroll
+        // through it, and MUI paints it with background.default — the page
+        // colour set above, not the surface the table sits on
+        MuiTableCell: {
+            styleOverrides: {
+                stickyHeader: {
+                    backgroundColor: colors.neutral[50]
+                }
+            }
         }
     }
 }