Input fields in image editing modal windows can overflow when the label has a specific length

[schwarzdesign]

Description

In the assets field, you can double-click a selected asset to open a modal window allowing you to edit custom fields placed in the field layout of the asset. The label and input are placed next to each other in a flex container. Unfortunately, if the field label has a very specific length, the input will overflow into the next line. See how the input for the Bildnachweis field overflows in the following screenshot:

This only happens with this specific label length, I think it's caused by the little info-Icon which has a fixed width of 1em and can cause the .heading container to be wider than it should be. The .heading is set to flex: 0 0 105px with a margin-right of 7px. The .input is set to width: calc(100% - 112px), so it fits exactly next to the header. But if the label has just the right length, it can push the info-icon slightly over to the right, causing the .heading container to end up with a larger size, so the input wraps to the next line:

This could be fixed in a number of way, not sure which is best. Removing the fixed width on the icon, setting .field to flex-wrap: nowrap or just decreasing the width of the input by a couple of pixels (e.g. width: calc(100% - 115px) all fix this issue.

Steps to reproduce

1. Add a field to an asset volume's field layout with exactly the following label: Bildnachweis
2. Enter something in the field's instructions field so the info-icon shows up.
3. Add an assets field to an entry, create a new entry and upload an image to the field.
4. Open the image editing modal by double-clicking on the placed image. The input for the Bildnachweis field will overflow in the next line.

Additional info

• Craft version: 3.6.12

[jsunsawyer]

Here's another example of content in the asset modal overflowing.

[brandonkelly]

This is fixed for 3.7 thanks to element editor slideouts.