Gutenberg: Why is the horizontal width fixed at 300 pixels in URLInput?

[kmix-39]

The element of URLInput protrudes in the InspectorControls.

packages/editor/src/components/url-input/style.scss
$input-size: 300px;

Why is the horizontal width fixed at 300 pixels in URLInput?
Is it useless in auto?

[melvinkoopmans]

When you use the URLInput in the inspector controls this will cause it to become wider than the container.

[karmatosed]

In order for it to not overlap a setting has to be made. If a solution can be found that avoids that but still doesn't have overlap, that would be great.

[smoothie]

Any updates on this?

[karmatosed]

Hi @ieim there aren't, however, let me loop a keyword on this to try and get it fixed.

[aduth]

This should probably be resolved as part of the ongoing refactoring of LinkControl component (#19523, #18061). The current implementation of URLInput seems to have been optimized as assuming to be rendered for use in applying a link in a paragraph, and isn't as reusable as one would want. A default or maximum width might be expected to be applied in these contexts (the link dialog), but the underlying URLInput shouldn't be very opinionated about this.

In the meantime, you might have success in overriding (or unsetting) the width values assigned to the selectors in this stylesheet:

https://github.com/WordPress/gutenberg/blob/b39e9d9c3f9336a1fd297b332e7eff4626b3efee/packages/block-editor/src/components/url-input/style.scss#L15

In order for it to not overlap a setting has to be made

@karmatosed It's not clear to me: What did you have in mind as being overlapped?

[talldan]

There's an isFullWidth prop that sets the width to 100%.

I remember looking into the reason for the hard-coded width a while back as it was also causing the same issue for me. The reason is that the suggestion list that appears underneath the input also has that width. Usually responsibility would be on some parent component of URLInput to constrain its width, but because the suggestions are rendered in a popover elsewhere in the DOM they can't be constrained.

[aduth]

Usually responsibility would be on some parent component of URLInput to constrain its width, but because the suggestions are rendered in a popover elsewhere in the DOM they can't be constrained.

That's a good observation to raise, and I see the challenge. It still seems technically possible to accommodate for this, e.g. using measurements (element.scrollWidth) of the input rendered within the parent container to assign as an explicit width of the suggestions popover content. It becomes a bit more complicated when you consider elements that resize in a fluid-width parent. There's some precedent here with react-resize-aware (#18745) and a Gutenberg abstraction (#19918) that we could lean on for this.

But, per my comment at https://github.com/WordPress/gutenberg/issues/18061#issuecomment-580480464, it might not be something worth spending too much effort on, considering if we want to...

Move LinkControl's custom suggestions rendering into URLInput

...where if LinkControl's suggestion rendering becomes the new default for URLInput, then it would no longer be as part of a popup.