[Bug]: TableCell actions overalpping over table cell layout, making file name unreadable

[divyadummy122]

Component

Table

Package version

v9.72.8

React version

18.3.1

Environment

dogfood, fastfood, prod

Current Behavior

When we reduce screen size or file name is big and in a table row, and when we hover over row, the table cell actions overlaps with file name making file name unreadable.

Expected Behavior

the file name should either truncate, to acomodate table cell action button, or go in other line and should never be overlapped with table cell action buttons, both div's should be separate

Reproduction

can be checked at existing fluent's story book in table cell action section

Steps to reproduce

1. checkout out here : https://storybooks.fluentui.dev/react/?path=/docs/components-table--docs#primary-cell
   in table cell action section hover over any row you will see table cell action overlapping over rows

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dmytrokirpa]

Hey @divyadummy122 , appreciate you flagging the issue!

I can confirm the problem - it’s due to the TableCelActions component is using position absolute and doesn't push the content: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-table/library/src/components/TableCellActions/useTableCellActionsStyles.styles.ts#L17.

The good news is it’s just a style thing, so you can tweak it on your end for now. Here’s an example to help you out: https://stackblitz.com/edit/kwwgdzrv?file=src%2Fexample.tsx

Screen.Recording.2025-12-09.at.10.05.56.mov

Assigning this to the code owners for a proper fix.