What happened?

Description

The add new field modal in the field layout view sits below the screen when you would expect it to show above the add new field button when it's located towards the bottom of the screen (if you're using Floating UI, it's the flip behavior). This makes it really difficult to use in some circumstances. This only applies to when you're editing an entry type in the drawer view.

In addition, the modal doesn't reposition when you scroll, so it's always stuck in the same position.

I would recommend using the Floating UI library. This is what Radix UI uses under the hood (there's a Vue port as well).

Steps to reproduce

1. Edit an entry type in the drawer view
2. Add a new field

Expected behavior

The modal should reposition so that it anchors with the add new field button and flips based on which side would better fit the modal contents.

Actual behavior

The modal gets cut off and/or doesn't reposition when you scroll.

Craft CMS version

5.4.4

PHP version

8.2.23

Operating system and version

Linux 6.5.11-linuxkit

Database type and version

MySQL 8.0.37

Image driver and version

Imagick 3.7.0 (ImageMagick 7.1.1-32)

Installed plugins and versions

• Alt text Generator 5.1.1
• Amazon S3 2.2.1
• Asset Usage 4.1.2
• CKEditor 4.2.0
• Colour Swatches 5.0.3
• Donkeytail 5.0.0-beta.1
• Empty Coalesce 5.0.0
• Hyper 2.0.5
• Image Hotspots 3.0.1
• Neo 5.2.7
• Retcon 3.2.0
• Retour 5.0.3
• Template Selector 5.0.1