Increase external media link input width, and increase top value of globe icon

[tjcafferkey]

Fixes #32249

Description

• Increase the width of the external media input element
• Increase top value of globe icon

How has this been tested?

• Create a new post or edit an existing post
• Add "Image" block and select "Insert from URL" option
• Enter an image URL
• Now select the "Replace" button. Observe the correct alignment of the globe icon.
• Click "Edit" to edit the URL. Box should expand to make the input more usable.

Screenshots

Before	After

Types of changes

Bug fix

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @tjcafferkey! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[tjcafferkey]

Failing E2E tests appear unrelated? Is there any way I can restart these?

[tjcafferkey]

Failing E2E tests appear unrelated? Is there any way I can restart these?

cc @getdave

[getdave]

Yep. Click on failing test details link. Then click restart tests.

[getdave]

Thanks for looking into fix this. Being able to see the full URL when in "edit" mode is very important.

Unfortunately whilst this works well on larger screens, on smaller viewports there appears to be a severe bug whereby the modal visually "vibrates".

Screen.Capture.on.2021-07-30.at.09-34-15.mp4

This appears to be due to some circular logic in the JS which causes a style attribute to be repeatedly set/unset.

If we can find a way to resolve that then we'll be in a good place. I think maybe it's the min-width you've set on the .block-editor-link-control__search-input which you'll need to apply (using a progressive enhancement approach) only on larger viewports.

[getdave]

Not sure this is necessary any longer as I was unable to replicate. I merged a PR recently which sorted out all this globe icon alignment so hopefully that's done it.

[getdave]

@tjcafferkey Anything I can do to help this along?

[tjcafferkey]

Sorry @getdave I have been AFK for a few weeks. I will be picking this back up. Thanks for checking in though.

[getdave]

@tjcafferkey How's this PR coming along? Can I help at all?