Positioning of the entity browser is sometimes off

I was able to reproduce this with Gin 8.x-3.0-rc1. What you need:

• Small viewport (1920x1080 of smaller)
• Button to open the entity browser is at the bottom of the viewport (see image)

This consistently opens the entity browser largely outside the viewport up top. Resizing the viewport triggers the fluidModal JS behavior and fixes it.

I have the same issue. It is as @beerendlauwers says. When the button is near the bottom of the viewport the problem is there. Having the button more to the center of the screen does not give any problem.
Also it is like said in the original description, with the vertical toolbar the problem is not there.

We recently switched to Gin for this projects and editors quickly hit this problem.

This patch is for the drupal_entitybrowser plugin, it's a dirty fix that hopefully can be expanded upon

@axl_m the line of code helps the modal to open in the right position.
However putting a patch for Entity Browser in a Gin issue is not the right position.
Although it may help to determine what the cause of this problem is.

I just tested with Claro theme and this issue is not happening then. So it seems the solution should be applied somewhere in Gin?

Some additional info:
There is a throbber spinning in the top left corner of the modal window.
After some time some errors show up in the browser console.

Throbber issue is discussed here https://www.drupal.org/project/entity_browser/issues/3181631 🐛 Use theme function for ajax progress Fixed

It is happening to me when creating/editing a node, when the width of the screen is smaller and we have many elements in the layout-region-node-secondary that need to be scrolled to display all the options.

Confirming this issue on 3.0.0-rc5 (and Drupal 10, drupal/entity_browser:2.9.0 with patches from #3181631 and #3301376)
Applying patch from #8 on `drupal/entity_browser` does not solve the issue for me.
Replicating it is possible following #5 except, sometimes it also happens when the viewport is small and the button is in the middle of the screen.
I also switched to claro theme to see if it is happening there but as mentioned in #10 it doesn't.

After some investigation this doesn't seem to be a problem with the calculation of the position of the dialog to me. It's looks more like the canvas (the grey aria) on which the dialog is shown, is being misplaced: Sometimes it overflows and the top is placed a bit higher outside the viewport. Which causes the dialog to seem misplaced compared to the viewport. After clicking on the canvas it snaps back into place and it looks like the dialog is centered again. I came to this conclusion after trying to drag the dialog off viewport. Sometimes I can and sometimes I cannot drag it off viewport. I also observed that the position (the calculated top&left px) of the dialog did not change compared to the canvas.

Not sure what causes this issue. I could not find a way to confirm that what I concluded is correct.

What fixes the placement for now is adding position: fixed, so the dialog position is calculated on the viewport and not the canvas (disclaimer, this does not actually solve the underlying problem but just the symptom and might cause accessibility issues)

.ui-dialog {
    position: fixed !important;
}

Closing as this should be fixed directly in Entity Browser

maybe related: https://www.drupal.org/project/drupal/issues/3356667 🐛 Error: Cannot read properties of undefined (reading 'settings')
 with dialog.position.js Needs work