Don't use resize observer

package.json

@@ -24,7 +24,6 @@
 		"@types/wordpress__components": "^23.0.1",
 		"@types/wordpress__dom-ready": "2.9.0",
 		"@types/wordpress__i18n": "^3.11.0",
-		"@wordpress/compose": "6.14.0",
 		"@wordpress/e2e-test-utils": "10.8.0",
 		"@wordpress/env": "^8.3.0",
 		"@wordpress/icons": "^9.28.0",

src/components/keyboard/index.tsx

@@ -7,15 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import {
-	// @ts-ignore: has no exported member
-	useResizeObserver,
-} from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import { KEYBOARD_WIDTH, KEYBOARD_PADDING } from '../../constants';
 import { KEYBOARD_LAYOUTS } from '../../keyboard-layout';
 import type { Key } from '../../constants';
 
@@ -26,9 +21,6 @@ type Props = {
 };
 
 const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
-	// Hooks to control the display of horizontal scroll bars.
-	const [ resizeListener, keysInnerSizes ] = useResizeObserver();
-
 	const keys =
 		KEYBOARD_LAYOUTS.find( ( { value } ) => value === keyLayout )?.keys ||
 		KEYBOARD_LAYOUTS[ 0 ].keys;
@@ -39,17 +31,8 @@ const Keyboard = ( { activeKeys, keyLayout, onKeyClick }: Props ) => {
 	};
 
 	return (
-		<div
-			className={ classnames( 'piano-block-keyboard', {
-				'is-scroll':
-					keysInnerSizes?.width && keysInnerSizes.width < KEYBOARD_WIDTH + KEYBOARD_PADDING * 2,
-			} ) }
-		>
-			{ resizeListener }
-			<div
-				className="piano-block-keyboard__inner"
-				style={ { width: `${ KEYBOARD_WIDTH }px`, padding: `0 ${ KEYBOARD_PADDING }px` } }
-			>
+		<div className="piano-block-keyboard">
+			<div className="piano-block-keyboard__inner">
 				{ keys.map( ( key, index ) => (
 					<button
 						key={ index }

src/components/keyboard/style.scss

@@ -1,15 +1,14 @@
 .piano-block-keyboard {
 	position: relative;
 	padding: 16px 0;
-
-	&.is-scroll {
-		overflow-x: scroll;
-	}
+	overflow-x: auto;
 
 	.piano-block-keyboard__inner {
 		box-sizing: border-box;
 		display: flex;
+		width: 850px;
 		height: 205px;
+		padding: 0 16px;
 		margin: 0 auto;
 	}
 

src/components/piano/style.scss

@@ -1,4 +1,3 @@
 .piano-block-container {
 	padding-top: 16px;
-	overflow: hidden;
 }

src/constants.ts

@@ -27,8 +27,6 @@ export const MIN_VOLUME = -10 as const;
 export const MAX_VOLUME = 5 as const;
 export const DEFAULT_INSTRUMENT = 'acoustic-piano' as const;
 export const DEFAULT_OSCILLATOR_TYPE = 'sine' as const;
-export const KEYBOARD_WIDTH = 850 as const;
-export const KEYBOARD_PADDING = 16 as const;
 
 export const DEFAULT_SETTINGS = {
 	volume: 0,