Open jayclydeTags opened 1 month ago
jayclydeTags
commented
1 month ago I tested this issue across multiple browsers, including Chrome, Edge, and Brave, and the popover gap appears as expected on all of them. However, the inconsistency with the gap is only present in the Firefox browser. It seems this issue may be specific to Firefox's rendering.
ramonjd
commented
1 month ago I didn't get much time to debug, but it looks like x as calculated by @floating-ui/react-dom/useFloating returns different value between browsers:
I'm looking at the post status popover. In Chrome x is 1196. In Firefox, it's 968.
This is directly applied to the popover wrapper components-popover.
Inline styles on status popover in Firefox:
transform: translateX(968px) translateY(309px) translateX(0em) scale(1) translateZ(0px);
Inline styles on status popover in Chrome
transform: translateX(1196px) translateY(310px) translateX(0em) scale(1) translateZ(0px);
Not sure if it's caused by the middleware. I can't find any issues on https://github.com/floating-ui/floating-ui/issues?q=sort%3Aupdated-desc+is%3Aissue+is%3Aopen+useFloating
Description
In the WordPress Site Editor, I've noticed that the gap between popovers and the Settings Panel is inconsistent. This inconsistency can lead to a less polished user experience and may cause alignment issues depending on the context in which the popover appears. Ensuring a consistent gap between these elements would improve the visual cohesion of the editor interface and enhance usability.
Step-by-step reproduction instructions
Screenshots, screen recording, code snippet
Environment info
WP 6.6.1 Gutenberg 18.9 Browser: Firefox
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.