diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts index 769dc8cf0ffcab..dd43f89ef100a3 100644 --- a/packages/components/src/tools-panel/styles.ts +++ b/packages/components/src/tools-panel/styles.ts @@ -8,6 +8,7 @@ import { css } from '@emotion/react'; */ import { StyledField as BaseControlField, + StyledHelp as BaseControlHelp, Wrapper as BaseControlWrapper, } from '../base-control/styles/base-control-styles'; import { COLORS, CONFIG } from '../utils'; @@ -102,16 +103,15 @@ export const ToolsPanelItem = css` /* Remove BaseControl components margins and leave spacing to grid layout */ && ${ BaseControlWrapper } { margin-bottom: 0; - /* The following allows controls with help text to maintain spacing. */ - /* e.g. ToggleControls. */ - display: flex; - flex-direction: column; - row-gap: ${ space( 3 ) }; - ${ BaseControlField } { + ${ BaseControlField }:last-child { margin-bottom: 0; } } + + ${ BaseControlHelp } { + margin-bottom: 0; + } `; export const ToolsPanelItemPlaceholder = css`