Adjust width

WordPress · Aug 8, 2022 · cb1b99a · cb1b99a
1 parent 2afe900
commit cb1b99a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -21,6 +21,10 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-typography-panel__half-width-control {
+	width: calc((100% - #{$grid-unit-30}) / 2);
+}
+
 .edit-site-global-styles-screen-heading-color,
 .edit-site-global-styles-screen-typography {
 	margin: $grid-unit-20;

diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -153,6 +153,7 @@ export default function TypographyPanel( { name, element } ) {
 						value={ selectedLevel }
 						onChange={ setCurrentTab }
 						isBlock
+						size="__unstable-large"
 					>
 						<ToggleGroupControlOption
 							value="heading"
@@ -205,15 +206,17 @@ export default function TypographyPanel( { name, element } ) {
 				/>
 			) }
 			{ hasLineHeightEnabled && (
-				<Spacer marginBottom={ 6 }>
-					<LineHeightControl
-						__nextHasNoMarginBottom={ true }
-						__unstableInputWidth={ '50%' }
-						value={ lineHeight }
-						onChange={ setLineHeight }
-						size="__unstable-large"
-					/>
-				</Spacer>
+				<div className="edit-site-typography-panel__half-width-control">
+					<Spacer marginBottom={ 6 }>
+						<LineHeightControl
+							__nextHasNoMarginBottom={ true }
+							__unstableInputWidth="auto"
+							value={ lineHeight }
+							onChange={ setLineHeight }
+							size="__unstable-large"
+						/>
+					</Spacer>
+				</div>
 			) }
 			{ hasAppearanceControl && (
 				<FontAppearanceControl
@@ -235,12 +238,14 @@ export default function TypographyPanel( { name, element } ) {
 				/>
 			) }
 			{ hasLetterSpacingControl && (
-				<LetterSpacingControl
-					value={ letterSpacing }
-					onChange={ setLetterSpacing }
-					size="__unstable-large"
-					__unstableInputWidth={ '50%' }
-				/>
+				<div className="edit-site-typography-panel__half-width-control">
+					<LetterSpacingControl
+						value={ letterSpacing }
+						onChange={ setLetterSpacing }
+						size="__unstable-large"
+						__unstableInputWidth="auto"
+					/>
+				</div>
 			) }
 		</PanelBody>
 	);