Poor spacing for NoticeActions in Notice component

[daledupreez]

Description

The spacing between the main children of the Notice component and actions added to the Notice component via the noticeActions prop is too tight. Also, there is no vertical spacing between multiple notice actions, which is very noticeable on mobile.

Note that there should be space between the text and the actions as per the Notice layout in the WordPress Design System Figma here. The Figma doesn't capture a mobile viewport, but the buttons being so close together is a bad layout regardless.

Step-by-step reproduction instructions

These reproductions rely on Storybook as a way to exclude other CSS as much as possible.

Basic spacing between children and actions

• Go to the Storybook page for the Notice component with actions: https://wordpress.github.io/gutenberg/?path=/story/components-notice--with-actions
• Note the lack of spacing between the text and the actions.

Vertical spacing between actions on mobile

• Go to the Storybook page for the Notice component with actions and the mobile viewport emulator active: (https://wordpress.github.io/gutenberg/?path=/story/components-notice--with-actions&globals=marginChecker:show;viewport:mobile1)
• Note the lack of vertical spacing between the actions

Screenshots, screen recording, code snippet

Spacing when actions are present

Spacing when actions are vertical

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure