Fix buttons on small breakpoint.

packages/edit-post/src/components/header/index.js

@@ -58,6 +58,7 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 					<PostSavedState
 						forceIsDirty={ hasActiveMetaboxes }
 						forceIsSaving={ isSaving }
+						showIconLabels={ showIconLabels }
 					/>
 				) }
 				<DevicePreview />

packages/edit-post/src/components/header/style.scss

@@ -164,18 +164,38 @@
 	}
 	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle,
 	.interface-pinned-items .components-button {
-		padding-left: $grid-unit-15;
-		padding-right: $grid-unit-15;
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+
+		@include break-small {
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+		}
 	}
 	.components-dropdown-menu__toggle {
-		margin-left: $grid-unit-15;
+		margin-left: $grid-unit;
+
+		@include break-small {
+			margin-left: $grid-unit-15;
+		}
 	}
 	// The inserter has a custom label, different from its aria-label, so we don't want to display both.
 	.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle {
 		&::after {
 			content: none;
 		}
 	}
+	// The post saved state button has a custom label only on small breakpoint
+	.editor-post-save-draft.editor-post-save-draft {
+		&::after {
+			content: none;
+		}
+		@include break-small {
+			&::after {
+				content: attr(aria-label);
+			}
+		}
+	}
 }
 
 .edit-post-header__dropdown {

packages/editor/src/components/post-saved-state/index.js

@@ -23,15 +23,19 @@ import PostSwitchToDraftButton from '../post-switch-to-draft-button';
  * Component showing whether the post is saved or not and providing save
  * buttons.
  *
- * @param {Object}   props               Component props.
+ * @param {Object} props               Component props.
  * @param {?boolean} props.forceIsDirty  Whether to force the post to be marked
- *                                       as dirty.
+ * as dirty.
  * @param {?boolean} props.forceIsSaving Whether to force the post to be marked
- *                                       as being saved.
- *
+ * as being saved.
+ * @param {?boolean} props.showIconLabels Whether interface buttons show labels instead of icons
  * @return {import('@wordpress/element').WPComponent} The component.
  */
-export default function PostSavedState( { forceIsDirty, forceIsSaving } ) {
+export default function PostSavedState( {
+	forceIsDirty,
+	forceIsSaving,
+	showIconLabels = false,
+} ) {
 	const [ forceSavedMessage, setForceSavedMessage ] = useState( false );
 	const isLargeViewport = useViewportMatch( 'small' );
 
@@ -140,6 +144,9 @@ export default function PostSavedState( { forceIsDirty, forceIsSaving } ) {
 	/* translators: button label text should, if possible, be under 16 characters. */
 	const label = isPending ? __( 'Save as pending' ) : __( 'Save draft' );
 
+	/* translators: button label text should, if possible, be under 16 characters. */
+	const shortLabel = __( 'Save' );
+
 	if ( ! isLargeViewport ) {
 		return (
 			<Button
@@ -148,7 +155,9 @@ export default function PostSavedState( { forceIsDirty, forceIsSaving } ) {
 				onClick={ () => savePost() }
 				shortcut={ displayShortcut.primary( 's' ) }
 				icon={ cloudUpload }
-			/>
+			>
+				{ showIconLabels && shortLabel }
+			</Button>
 		);
 	}