[5.x]: Add new field modal is cut off

[ryanleichty]

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

[brandonkelly]

Thanks for reporting that!

Having the menu always shown below the button was an intentional choice, because otherwise it’s not possible to drag-n-drop the fields into place. But I suppose being able to see the menu at all is more important than being able to drag-n-drop. (It’s still possible to drag the field into the right position after you’ve selected it.) So just removed the “below the button only” mandate, and fixed the scrolling bug as well.

[brandonkelly]

Realized there’s an obvious solution to the drag-n-drop problem: we can just hide the menu as soon as you start dragging. Made that change as well.

CleanShot.2024-10-08.at.09.31.01.mp4

[ryanleichty]

Nice, that's a good solve for that 👍

[brandonkelly]

Craft 4.12.6 and 5.4.7 are out with those changes. Thanks again!