Ensure form elements have bottom margin to separate them on tiny screens

Co-authored-by: imath <math.viet@gmail.com>

Author: talldan

packages/editor/src/components/media-placeholder/index.js

@@ -156,7 +156,7 @@ class MediaPlaceholder extends Component {
 					>
 						<input
 							type="url"
-							className="components-placeholder__input"
+							className="components-placeholder__input editor-media-placeholder__url-input"
 							aria-label={ labels.title }
 							placeholder={ __( 'Enter URL here…' ) }
 							onChange={ this.onChangeSrc }

packages/editor/src/components/media-placeholder/style.scss

@@ -2,13 +2,18 @@
 	max-width: 400px;
 
 	.editor-media-placeholder__url-input-form {
-		margin-top: 1em;
+		margin-top: 0.5rem;
 		max-width: none;
 	}
 }
 
+.editor-media-placeholder__url-input {
+	margin-bottom: 0.5rem;
+}
+
 .editor-media-placeholder__upload-button.components-button {
 	margin-right: 5px;
+	margin-bottom: 0.5rem;
 
 	.dashicon {
 		vertical-align: middle;