Hide horizontal overflow in Navigator

WordPress · Oct 5, 2021 · a0a1b74 · a0a1b74
1 parent 1f75f8f
commit a0a1b74
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -3,6 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -17,6 +18,7 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorProviderProps, NavigatorPath } from '../types';
@@ -25,17 +27,21 @@ function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
 	forwardedRef: Ref< any >
 ) {
-	const { initialPath, children, ...otherProps } = useContextSystem(
-		props,
-		'NavigatorProvider'
-	);
+	const {
+		initialPath,
+		children,
+		className,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorProvider' );
 
 	const [ path, setPath ] = useState< NavigatorPath >( {
 		path: initialPath,
 	} );
 
+	const classes = useCx()( css( { overflowX: 'hidden' } ), className );
+
 	return (
-		<View ref={ forwardedRef } { ...otherProps }>
+		<View ref={ forwardedRef } className={ classes } { ...otherProps }>
 			<NavigatorContext.Provider value={ [ path, setPath ] }>
 				{ children }
 			</NavigatorContext.Provider>