FormTokenField: Fix token overflow when moving cursor left or right

[t-hamano]

What?

This PR fixes a problem in the FormTokenField component where tokens protrude from the input element when the cursor is moved between (or at the beginning of) tokens.

Before	After
before.mp4	after.mp4

Why?

This is because this component does not have box-sizing:border-box. However, this problem does not occur in the sidebar of a post, for example, because the box-sizing is reset.

gutenberg/packages/edit-post/src/style.scss

Lines 59 to 65 in 33bf984

	.edit-post-sidebar,
	.editor-post-publish-panel,
	.components-popover,
	.components-modal__frame,
	.edit-post-editor__inserter-panel {
	@include reset;
	}

gutenberg/packages/base-styles/_mixins.scss

Lines 344 to 352 in 33bf984

	@mixin reset {
	box-sizing: border-box;
	*,
	*::before,
	*::after {
	box-sizing: inherit;
	}
	}

Testing Instructions

• Launch Storybook.
• Enter some tokens.
• Press the left and right cursor keys.
• Confirm that the tokens do not protrude from the input element.

[mirka]

Works well, thanks!