Refactor: Separate input form styles to a dedicated stylesheet

[yogeshbhutkar]

What, Why and How?

The following CSS rule is added inside content.scss which targets the iFrame to apply the styles.

gutenberg/packages/block-editor/src/components/media-placeholder/content.scss

Lines 1 to 7 in 72a9996

	.block-editor-media-placeholder__url-input-form {
	min-width: 260px;
	@include break-small() {
	width: 300px;
	}
	}

Therefore, the issue arises because this rule targets a class within the components-popover__content class, which is outside the iframe, leading to the styles not getting applied.

Hence, it's recommended to extract this rule into a dedicated style.scss for it to be applied outside the iframe where the popover component is rendered.

Testing Instructions

1. Create an image/audio/video block in site editor.
2. Notice the size of Insert from URL input is now back to normal.

Screenshots or screencast

Before	After

---

Works as expected in the post editor page.

---

Works well with the image/video block.

Closes: #68494

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <yogeshbhutkar@git.wordpress.org>
Co-authored-by: prasadkarmalkar <prasadkarmalkar@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ramonjd]

Thanks for the quick fix. LGTM

Here's the site editor:

Kapture.2025-01-07.at.10.24.34.mp4

I also tested the post editor. 👍🏻

I'll merge since it fixes a pretty bad bug. If any post-merge refactors are required, I'm happy to follow up.