Fix the width spacing when using the full width alignment

packages/block-library/src/button/edit.native.js

@@ -257,8 +257,8 @@ class ButtonEdit extends Component {
 
 		if ( parentWidth && ! width && isParentWidthChanged ) {
 			this.setState( {
-				maxWidth: Math.min(
-					parentWidth,
+				maxWidth: Math.max(
+					parentWidth - spacing,
 					this.props.maxWidth - 2 * spacing
 				),
 			} );
@@ -376,7 +376,21 @@ class ButtonEdit extends Component {
 				? MIN_WIDTH
 				: placeholderTextWidth;
 		if ( width ) {
-			minWidth = Math.floor( maxWidth * ( width / 100 ) );
+			const minWidthSpace = Math.floor( maxWidth * ( width / 100 ) );
+			switch ( width ) {
+				case 100:
+					minWidth = minWidthSpace - 10;
+					break;
+				case 75:
+					minWidth = minWidthSpace - 16;
+					break;
+				case 50:
+					minWidth = minWidthSpace - 26;
+					break;
+				case 25:
+					minWidth = minWidthSpace - 35;
+					break;
+			}
 		}
 		// To achieve proper expanding and shrinking `RichText` on Android, there is a need to set
 		// a `placeholder` as an empty string when `RichText` is focused,

packages/block-library/src/buttons/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { debounce } from 'lodash';
-import { View } from 'react-native';
+import { View, Dimensions } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -73,15 +73,10 @@ export default function ButtonsEdit( {
 	);
 
 	useEffect( () => {
-		const margins = 2 * styles.parent.marginRight;
 		const { width } = sizes || {};
-		const { isFullWidth } = alignmentHelpers;
 
 		if ( width ) {
-			const base = width - margins;
-			const isFullWidthBlock = isFullWidth( align );
-
-			setMaxWidth( isFullWidthBlock ? base - 2 * spacing : base );
+			setMaxWidth( width );
 		}
 	}, [ sizes, align ] );
 
@@ -121,6 +116,10 @@ export default function ButtonsEdit( {
 
 	const remove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 	const shouldRenderFooterAppender = isSelected || isInnerButtonSelected;
+
+	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
+	const { isFullWidth } = alignmentHelpers;
+
 	return (
 		<>
 			{ isSelected && (
@@ -149,7 +148,7 @@ export default function ButtonsEdit( {
 				horizontalAlignment={ contentJustification }
 				onDeleteBlock={ shouldDelete ? remove : undefined }
 				onAddBlock={ onAddNextButton }
-				parentWidth={ maxWidth }
+				parentWidth={ isFullWidth( align ) ? screenWidth : maxWidth }
 				marginHorizontal={ spacing }
 				marginVertical={ spacing }
 				__experimentalLayout={ layoutProp }

packages/components/src/mobile/utils/alignments.native.js

@@ -5,7 +5,13 @@ export const WIDE_ALIGNMENTS = {
 	},
 	// `innerContainers`: Group of blocks based on `InnerBlocks` component,
 	// used to nest other blocks inside
-	innerContainers: [ 'core/group', 'core/columns', 'core/column' ],
+	innerContainers: [
+		'core/group',
+		'core/columns',
+		'core/column',
+		'core/buttons',
+		'core/button',
+	],
 	excludeBlocks: [ 'core/heading' ],
 };