ARTICLE AD BOX
I’m working on a React project and I’m seeing some unusual UI behavior that I’m struggling to reason about.
A paginated table
The last column is a sticky action column (position: sticky)
Each row has a three-dots action button
Clicking it opens a popover
Each popover option triggers a modal, which also fires a POST request to the backend
When the modal opens:
Modal appears above everything (z-50 in Tailwind)
Background content is blurred / dimmed
Table rows should visually remain unchanged underneath
When I click an action on a row:
The modal opens correctly on top
BUT every row below the clicked row gets a white background
Rows above the clicked row look fine
The sticky action column already has a white background (intended)
Modal: z-50
Sticky action column: z-10 + white background
Modal overlay blurs the background
Table is built using a column config array
Each column defines:
Header label
Cell renderer
For the sticky action column:
The cell value is a ReactNode
This component contains:
The three-dots button
A Popover component
Modal logic inside the popover
The modal has a higher z-index than the sticky column, so it correctly appears on top
But why are all rows below the clicked row getting a white background?
Is this:
A stacking context issue?
Something related to position: sticky creating a new stacking context?
A side effect of the modal overlay / backdrop?
A repaint / reflow issue caused by how the popover/modal is mounted?
