Fix image upload button on mobile view

WordPress · Sep 22, 2017 · b2d861b · b2d861b
1 parent dbe1857
commit b2d861b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 deletions.
diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss
@@ -12,7 +12,6 @@
 	}
 }
 
-
 .wp-block-image__resize-handler-top-right,
 .wp-block-image__resize-handler-bottom-right,
 .wp-block-image__resize-handler-top-left,

diff --git a/components/form-file-upload/index.js b/components/form-file-upload/index.js
@@ -6,6 +6,7 @@ import { Component } from 'element';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import IconButton from '../icon-button';
 
 class FormFileUpload extends Component {
@@ -27,7 +28,7 @@ class FormFileUpload extends Component {
 		const { children, multiple = false, accept, onChange, ...props } = this.props;
 
 		return (
-			<div>
+			<div className="components-form-file-upload">
 				<IconButton
 					icon="upload"
 					onClick={ this.openFileDialog }

diff --git a/components/form-file-upload/style.scss b/components/form-file-upload/style.scss
@@ -0,0 +1,11 @@
+.components-form-file-upload {
+	.button.button-large {
+		font-size: 0;
+		padding: 6px 0 3px;
+
+		@include break-large() {
+			font-size: inherit;
+			padding: 0 12px 2px;
+		}
+	}
+}
diff --git a/editor/header/tools/style.scss b/editor/header/tools/style.scss
@@ -106,13 +106,6 @@
 	margin-bottom: 0;
 }
 
-@media ( max-width: $break-large ) {
-	.wp-core-ui .button.wp-block-image__upload-button.button.button-large {
-	  padding: 6px 21px 6px 6px;
-		width: 15px;
-	}
-}
-
 .editor-tools__publish-button.is-saving,
 .editor-tools__publish-button.is-saving:disabled {
 	position: relative;
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
     	}
     }
     .wp-block-image__resize-handler-top-right,
     .wp-block-image__resize-handler-bottom-right,
     .wp-block-image__resize-handler-top-left,
@@ Expand Down @@