Settings Page: fix Tools content layout

Author: t-hamano

src/admin/tools/components/export-tool/index.js

@@ -4,7 +4,12 @@
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import { useContext } from '@wordpress/element';
-import { Button, PanelBody, __experimentalText as Text } from '@wordpress/components';
+import {
+	Button,
+	PanelBody,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -46,15 +51,17 @@ export default function ExportTool() {
 
 	return (
 		<PanelBody title={ __( 'Export Editor Config', 'custom-html-block-extension' ) }>
-			<Text as="p">
-				{ __(
-					'Use the download button to export the editor settings. You can restore the editor config by importing the exported file on another WordPress site.',
-					'custom-html-block-extension'
-				) }
-			</Text>
-			<Button variant="primary" onClick={ onExportOptions } __next40pxDefaultSize>
-				{ __( 'Export', 'custom-html-block-extension' ) }
-			</Button>
+			<VStack align="start">
+				<Text as="p">
+					{ __(
+						'Use the download button to export the editor settings. You can restore the editor config by importing the exported file on another WordPress site.',
+						'custom-html-block-extension'
+					) }
+				</Text>
+				<Button variant="primary" onClick={ onExportOptions } __next40pxDefaultSize>
+					{ __( 'Export', 'custom-html-block-extension' ) }
+				</Button>
+			</VStack>
 		</PanelBody>
 	);
 }

src/admin/tools/components/import-tool/index.js

@@ -87,13 +87,13 @@ export default function ImportTool() {
 
 	return (
 		<PanelBody title={ __( 'Import editor config', 'custom-html-block-extension' ) }>
-			<Text as="p">
-				{ __(
-					'Select the Custom HTML Block Extension JSON file you would like to import and click the import button below.',
-					'custom-html-block-extension'
-				) }
-			</Text>
 			<VStack spacing={ 4 } align="start">
+				<Text as="p">
+					{ __(
+						'Select the Custom HTML Block Extension JSON file you would like to import and click the import button below.',
+						'custom-html-block-extension'
+					) }
+				</Text>
 				<HStack spacing={ 4 } justify="start" wrap>
 					<FormFileUpload
 						accept="application/json"