Global Styles: Implement uniform header layout (#70464)

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>

Author: 3 people

packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js

@@ -69,9 +69,9 @@ function FontSizeGroup( {
 				/>
 			) }
 			<VStack spacing={ 4 }>
-				<HStack justify="space-between" align="center">
+				<HStack>
 					<Subtitle level={ 3 }>{ label }</Subtitle>
-					<FlexItem>
+					<FlexItem className="edit-site-global-styles__typography-panel__options-container">
 						{ origin === 'custom' && (
 							<Button
 								label={ __( 'Add font size' ) }

packages/edit-site/src/components/global-styles/shadows-edit-panel.js

@@ -327,12 +327,7 @@ function ShadowEditor( { shadow, onChange } ) {
 		<>
 			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
-					<Flex
-						align="center"
-						className="edit-site-global-styles__shadows-panel__title"
-					>
-						<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
-					</Flex>
+					<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>
 					<FlexItem className="edit-site-global-styles__shadows-panel__options-container">
 						<Button
 							size="small"

packages/edit-site/src/components/global-styles/style.scss

@@ -104,7 +104,8 @@
 	flex-shrink: 0;
 }
 
-.edit-site-global-styles__shadows-panel__options-container {
+.edit-site-global-styles__shadows-panel__options-container,
+.edit-site-global-styles__typography-panel__options-container {
 	height: $grid-unit * 3;
 }