diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js
index d9c7a985c011fc..102efdcf99b7b7 100644
--- a/packages/components/src/tools-panel/styles.js
+++ b/packages/components/src/tools-panel/styles.js
@@ -62,3 +62,7 @@ export const ToolsPanelItem = css`
 		max-width: 100%;
 	}
 `;
+
+export const DropdownMenu = css`
+	min-width: 200px;
+`;
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 73af46f2beff77..10061cfd8b4300 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -29,6 +29,7 @@ const getAriaLabel = ( label, isSelected ) => {
 
 const ToolsPanelHeader = ( props, forwardedRef ) => {
 	const {
+		dropdownMenuClassName,
 		hasMenuItems,
 		label: labelText,
 		menuItems,
@@ -51,7 +52,7 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 				<DropdownMenu
 					icon={ moreVertical }
 					label={ labelText }
-					menuProps={ { style: { minWidth: '200px' } } }
+					menuProps={ { className: dropdownMenuClassName } }
 				>
 					{ ( { onClose } ) => (
 						<>
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.js b/packages/components/src/tools-panel/tools-panel-header/hook.js
index c903c24725e725..462d515b7b6fa2 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.js
@@ -22,10 +22,15 @@ export function useToolsPanelHeader( props ) {
 		return cx( styles.ToolsPanelHeader, className );
 	}, [ className ] );
 
+	const dropdownMenuClassName = useMemo( () => {
+		return cx( styles.DropdownMenu );
+	}, [] );
+
 	const { menuItems, hasMenuItems } = useToolsPanelContext();
 
 	return {
 		...otherProps,
+		dropdownMenuClassName,
 		hasMenuItems,
 		menuItems,
 		className: classes,