Fix floating menu being transparent on Firefox

[khuddite]

Fixes #8840

1. Summary
   It seems transform: translate css that's applied via @floating-ui causes the issue on Firefox. I am not 100% sure why it gets transparent when transform: translate is applied but it seems transform: translate creates a new context that conflicts with parents' z-indexes. There is a documentation about stacking context here

FYI - this is what ChatGPT told me -

- When you apply transform (e.g., transform: translate), it forces the element to create a new stacking context, separate from its parent. This is a CSS specification behavior.
- Even if z-index: 10 is applied to the menu, it operates within its own stacking context, potentially causing Firefox to mishandle layering or rendering, especially if GPU acceleration or compositing is involved.

2. Solution
   Fortunately @floating-ui/react library provides an option to not use transform property and use layout props instead. When I opted out of the transform flag, the issue was fixed.
   I upgraded @floating-ui/react library as part of this PR even though it was not quite necessary to fix the issue. I can roll it back if that's not desired.

3. Screen Recording

CleanShot.2024-12-03.at.13.12.49.mp4

[greptile-apps]

PR Summary

This PR fixes a Firefox-specific transparency issue with dropdown menus by updating @floating-ui/react and modifying how floating elements are positioned.

• Updated @floating-ui/react from 0.24.3 to 0.26.28 in package.json to access transform disabling feature
• Modified RecordTableCellEditMode.tsx to set transform: false in useFloating hook to prevent stacking context conflicts
• Issue was caused by CSS transform: translate creating problematic stacking contexts in Firefox's rendering engine
• Solution uses direct positioning instead of transforms, maintaining visual consistency across browsers

_{2 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[Bonapara]

Thanks @khuddite for the PR!

[lucasbordeau]

@khuddite Thank you for digging this issue, I'll close this PR and implement your fix in a new generic floating component to harmonize this across the whole codebase because it generates too many regressions for the past months.

Master PR for dropdown improvements and fixes : #8807

[khuddite]

@khuddite Thank you for digging this issue, I'll close this PR and implement your fix in a new generic floating component to harmonize this across the whole codebase because it generates too many regressions for the past months.

Master PR for dropdown improvements and fixes : #8807

Cool, sounds good!