Tweak Global Setting layout

t-hamano · Oct 20, 2024 · e4d8b26 · e4d8b26
1 parent e21666d
commit e4d8b26
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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