Fix incorrect width on Trendy style button arrow (#902)

.dev/assets/design-styles/trendy/css/blocks/button.scss

@@ -3,15 +3,17 @@
 .wp-block-button__link:not(.wp-block-coblocks-social__button) {
 	box-shadow: 0.4em 0.4em 0 0 rgba(0, 0, 0, 0.075);
 	overflow: hidden;
+	transition: width 100ms cubic-bezier(0.7, 0, 0.3, 1);
 
 	&::after {
 		content: "→";
 		display: inline-block;
+		max-width: 0;
 		opacity: 0;
 		overflow: hidden;
 		position: relative;
 		top: 1px;
-		transition: width 100ms cubic-bezier(0.7, 0, 0.3, 1) 100ms, opacity 200ms cubic-bezier(0.7, 0, 0.3, 1), margin 200ms cubic-bezier(0.7, 0, 0.3, 1) 100ms;
+		transition: max-width 100ms cubic-bezier(0.7, 0, 0.3, 1), opacity 100ms cubic-bezier(0.7, 0, 0.3, 1), margin 100ms cubic-bezier(0.7, 0, 0.3, 1) 100ms;
 		width: 0;
 	}
 
@@ -20,8 +22,9 @@
 
 		&::after {
 			margin-left: 10px;
+			max-width: 300px;
 			opacity: 1;
-			width: 10px;
+			width: auto;
 		}
 	}
 }

.dev/tests/cypress/integration/customizer/customizer.spec.js

@@ -85,6 +85,7 @@ describe( 'Test the customizer works as intended.', () => {
 			cy.get( '#accordion-section-colors' ).click();
 			cy.get( 'label[for="_customize-input-design_style_control-radio-' + designStyle.toLowerCase() + '"]' ).click( { force: true } );
 
+			cy.wait( 1500 );
 			// Wait for the submit button to be ready.
 			cy.get('.publish-settings', { timeout: 10000 }).should('be.visible');
 			saveCustomizerSettings();

.github/workflows/run-tests.yml

@@ -150,3 +150,11 @@ jobs:
 
       - name: Run tests
         run: yarn test:e2e:customizer -- --record
+
+      - name: Upload failure video
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: customizer.spec.js.mp4
+          path: ./.dev/tests/cypress/videos/**/*.mp4
+          retention-days: 1