FormTokenField: Fix token overflow when moving cursor left or right (#…

…52662) * FormTokenField: Fix token overflow when moving cursor left or right * Update Changelog * Use mixin
WordPress · Jul 18, 2023 · 643b7b8 · 643b7b8 · github-actions · Jul 18, 2023
1 parent 5894190
commit 643b7b8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,7 @@
 -   `Popover`: Pin `react-dropdown-menu` version to avoid breaking changes in dependency updates. ([#52356](https://github.com/WordPress/gutenberg/pull/52356)).
 -   `Item`: Unify focus style and add default font styles. ([#52495](https://github.com/WordPress/gutenberg/pull/52495)).
 -   `Toolbar`: Fix toolbar items not being tabbable on the first render. ([#52613](https://github.com/WordPress/gutenberg/pull/52613))
+-   `FormTokenField`: Fix token overflow when moving cursor left or right. ([#52662](https://github.com/WordPress/gutenberg/pull/52662))
 
 ## 25.3.0 (2023-07-05)
 

diff --git a/packages/components/src/form-token-field/styles.ts b/packages/components/src/form-token-field/styles.ts
@@ -9,6 +9,7 @@ import { css } from '@emotion/react';
  */
 import { Flex } from '../flex';
 import { space } from '../ui/utils/space';
+import { boxSizingReset } from '../utils';
 
 type TokensAndInputWrapperProps = {
 	__next40pxDefaultSize: boolean;
@@ -27,6 +28,7 @@ const deprecatedPaddings = ( {
 
 export const TokensAndInputWrapperFlex = styled( Flex )`
 	padding: 7px;
+	${ boxSizingReset }
 
 	${ deprecatedPaddings }
 `;