Add a mobile minimum size for form fields (#13639)

On Safari for iOS, the browser automatically zooms into any form field that contains text with a font size less than `16px`. When this occurs, users must manually zoom back out after dismissing the keyboard. This happens frequently in our interface, since many of our text fields use `13px` text. It breaks up the flow, and makes editing feel _very_ non-mobile-optimized. 

We already have a [`$mobile-text-min-font-size` variable](https://github.com/WordPress/gutenberg/blob/286317c8e61b1a2922243875fe1f98c868d7859b/assets/stylesheets/_variables.scss#L15), and use this to avoid this behavior in the block inserter:

https://github.com/WordPress/gutenberg/blob/ce864a6f9aff4eea9b4bd3994b2cf4bae30105cb/packages/editor/src/components/inserter/style.scss#L75-L79

This PR expands that fix out to as many different form fields as I could find:

- General form fields, defined in `/edit-post/` (this covers most fields by itself)
- Preformatted, Code, and HTML blocks
- Form Token Field (used in the tags panel of the document sidebar)
- URL Input field

⚠️ _This worked fine in my testing, but since it effects a lot of fields, it could use a lot of testing!_ 

In addition, the Code Editor extended off-screen on small screens. This PR adds a `max-width` to clean that up. 

## Screenshots 

Before: 

🎥  [**Screencast of the issue**](https://cloudup.com/cf1VqxNV5LN)

![ios-zoom-old](https://user-images.githubusercontent.com/1202812/52131756-93f03700-260b-11e9-83de-d03fb5a84a09.gif)

<img width="376" alt="screen shot 2019-02-01 at 10 16 56 am" src="https://user-images.githubusercontent.com/1202812/52131610-2e03af80-260b-11e9-83d1-15c66590f62a.png">

After:

🎥 [**Screencast with this fix**](https://cloudup.com/cRQNYsDRsmx)

![ios-zoom](https://user-images.githubusercontent.com/1202812/52131874-f0535680-260b-11e9-9ad8-6ede81e21b60.gif)

<img width="375" alt="screen shot 2019-02-01 at 10 02 16 am" src="https://user-images.githubusercontent.com/1202812/52131615-322fcd00-260b-11e9-88af-5407e32388ee.png">


---
cc @iamthomasbishop for some thoughts/testing too.

packages/block-library/src/code/editor.scss

@@ -1,8 +1,13 @@
 .wp-block-code .editor-plain-text {
 	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
 
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size;
+	@include break-small {
+		font-size: $default-font-size;
+	}
+
 	&:focus {
 		box-shadow: none;
 	}

packages/block-library/src/html/editor.scss

@@ -1,11 +1,16 @@
 .wp-block-html .editor-plain-text {
 	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
 	color: $dark-gray-800;
 	padding: 0.8em 1em;
 	border: 1px solid $light-gray-500;
 	border-radius: 4px;
 
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size;
+	@include break-small {
+		font-size: $default-font-size;
+	}
+
 	&:focus {
 		box-shadow: none;
 	}

packages/block-library/src/preformatted/theme.scss

@@ -1,7 +1,12 @@
 .wp-block-preformatted {
 	pre {
 		font-family: $editor-html-font;
-		font-size: $text-editor-font-size;
 		color: $dark-gray-800;
+
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $text-editor-font-size;
+		}
 	}
 }

packages/components/src/form-token-field/style.scss

@@ -31,7 +31,6 @@
 		min-height: 24px;
 		background: inherit;
 		border: 0;
-		font-size: $default-font-size;
 		color: $dark-gray-800;
 		box-shadow: none;
 

packages/edit-post/src/components/text-editor/style.scss

@@ -16,6 +16,7 @@
 
 .edit-post-text-editor {
 	width: 100%;
+	max-width: calc(100% - #{$grid-size-large * 2});
 	margin-left: $grid-size-large;
 	margin-right: $grid-size-large;
 

packages/edit-post/src/style.scss

@@ -174,10 +174,15 @@ body.block-editor-page {
 	select,
 	textarea {
 		font-family: $default-font;
-		font-size: $default-font-size;
 		padding: 6px 8px;
 		@include input-style__neutral();
 
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
 		&:focus {
 			@include input-style__focus();
 		}

packages/editor/src/components/post-text-editor/style.scss

@@ -7,9 +7,14 @@
 	resize: none;
 	overflow: hidden;
 	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
 	line-height: 150%;
 
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size;
+	@include break-small {
+		font-size: $text-editor-font-size;
+	}
+
 	&:hover,
 	&:focus {
 		border: $border-width solid $light-gray-500;

packages/editor/src/components/url-input/style.scss

@@ -20,6 +20,12 @@ $input-size: 300px;
 		margin-left: 0;
 		margin-right: 0;
 
+		/* Fonts smaller than 16px causes mobile safari to zoom. */
+		font-size: $mobile-text-min-font-size;
+		@include break-small {
+			font-size: $default-font-size;
+		}
+
 		&::-ms-clear {
 			display: none;
 		}