From e4d8b26b1fb2166858c9903a0980e47ddb03805e Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sun, 20 Oct 2024 23:37:22 +0900
Subject: [PATCH] Tweak Global Setting layout

---
 src/controls/border-radius-control.tsx         |  2 +-
 src/controls/border-spacing-control.tsx        |  4 ++--
 src/controls/border-width-control.tsx          |  4 ++--
 src/controls/padding-control.tsx               |  4 ++--
 src/settings/global-settings/index.tsx         | 15 +++++++--------
 src/settings/global-settings/setting-modal.tsx |  4 ++--
 6 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/controls/border-radius-control.tsx b/src/controls/border-radius-control.tsx
index 781b29e..086928e 100644
--- a/src/controls/border-radius-control.tsx
+++ b/src/controls/border-radius-control.tsx
@@ -167,7 +167,7 @@ export default function BorderRadiusControl( {
 									units={ borderRadiusUnits }
 									min={ 0 }
 									size="__unstable-large"
-									__unstableInputWidth="110px"
+									__unstableInputWidth="100px"
 								/>
 							</div>
 						) }
diff --git a/src/controls/border-spacing-control.tsx b/src/controls/border-spacing-control.tsx
index 9eee88b..c7b7b38 100644
--- a/src/controls/border-spacing-control.tsx
+++ b/src/controls/border-spacing-control.tsx
@@ -138,7 +138,7 @@ export default function BorderSpacingControl( {
 								placeholder={ allInputPlaceholder }
 								onChange={ handleOnChangeAll }
 								size="__unstable-large"
-								__unstableInputWidth="110px"
+								__unstableInputWidth="100px"
 							/>
 						</HStack>
 					) : (
@@ -153,7 +153,7 @@ export default function BorderSpacingControl( {
 										units={ borderSpacingUnits }
 										onChange={ ( value ) => handleOnChange( value, item.value ) }
 										size="__unstable-large"
-										__unstableInputWidth="110px"
+										__unstableInputWidth="100px"
 									/>
 								</HStack>
 							) ) }
diff --git a/src/controls/border-width-control.tsx b/src/controls/border-width-control.tsx
index 92f7ea6..269725f 100644
--- a/src/controls/border-width-control.tsx
+++ b/src/controls/border-width-control.tsx
@@ -167,7 +167,7 @@ export default function BorderWidthControl( {
 									placeholder={ allInputPlaceholder }
 									onChange={ handleOnChangeAll }
 									size="__unstable-large"
-									__unstableInputWidth="110px"
+									__unstableInputWidth="100px"
 								/>
 							</div>
 						) }
@@ -205,7 +205,7 @@ export default function BorderWidthControl( {
 										onFocus={ () => handleOnFocus( item.value ) }
 										onChange={ ( value ) => handleOnChange( value, item.value ) }
 										size="__unstable-large"
-										__unstableInputWidth="110px"
+										__unstableInputWidth="100px"
 									/>
 								</div>
 							);
diff --git a/src/controls/padding-control.tsx b/src/controls/padding-control.tsx
index dad3151..79f44c4 100644
--- a/src/controls/padding-control.tsx
+++ b/src/controls/padding-control.tsx
@@ -136,7 +136,7 @@ export default function PaddingControl( {
 									value={ allInputValue }
 									units={ paddingUnits }
 									size="__unstable-large"
-									__unstableInputWidth="110px"
+									__unstableInputWidth="100px"
 								/>
 							</div>
 						) }
@@ -172,7 +172,7 @@ export default function PaddingControl( {
 										onFocus={ () => handleOnFocus( item.value ) }
 										onChange={ ( value ) => handleOnChange( value, item.value ) }
 										size="__unstable-large"
-										__unstableInputWidth="110px"
+										__unstableInputWidth="100px"
 									/>
 								</div>
 							);
diff --git a/src/settings/global-settings/index.tsx b/src/settings/global-settings/index.tsx
index 3bbeba0..154ce3a 100644
--- a/src/settings/global-settings/index.tsx
+++ b/src/settings/global-settings/index.tsx
@@ -56,14 +56,6 @@ export default function GlobalSettings() {
 				marginBottom={ 0 }
 				style={ { borderTop: '1px solid #e0e0e0' } }
 			>
-				<Button
-					icon={ help }
-					variant="link"
-					onClick={ () => setIsHelpModalOpen( true ) }
-					size="compact"
-				>
-					{ __( 'Help', 'flexible-table-block' ) }
-				</Button>
 				{ ! isGlobalSettingLoaded && <Spinner /> }
 				{ isGlobalSettingLoaded && showGlobalSetting && (
 					<Button
@@ -75,6 +67,13 @@ export default function GlobalSettings() {
 						{ __( 'Global setting', 'flexible-table-block' ) }
 					</Button>
 				) }
+				<Button
+					icon={ help }
+					variant="link"
+					onClick={ () => setIsHelpModalOpen( true ) }
+					label={ __( 'Help', 'flexible-table-block' ) }
+					size="compact"
+				/>
 			</Spacer>
 			{ isHelpModalOpen && <HelpModal { ...{ setIsHelpModalOpen } } /> }
 			{ options && isSettingModalOpen && ( isAdministrator || options?.show_global_setting ) && (
diff --git a/src/settings/global-settings/setting-modal.tsx b/src/settings/global-settings/setting-modal.tsx
index e7acad9..06b8982 100644
--- a/src/settings/global-settings/setting-modal.tsx
+++ b/src/settings/global-settings/setting-modal.tsx
@@ -250,7 +250,7 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 											size="__unstable-large"
-											__unstableInputWidth="110px"
+											__unstableInputWidth="100px"
 										/>
 									</Spacer>
 									<Spacer
@@ -273,7 +273,7 @@ export default function SettingModal( { options, isAdministrator, setIsSettingMo
 												} );
 											} }
 											size="__unstable-large"
-											__unstableInputWidth="110px"
+											__unstableInputWidth="100px"
 										/>
 									</Spacer>
 									<Spacer