Social: Move Mastodon form input direction (#41986)

* Move Mastodon input form to the left

* changelog

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/13539996898

Upstream-Ref: Automattic/jetpack@c1c3c2b

Author: gmjuhasz

CHANGELOG.md

@@ -5,10 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.79.1-alpha] - unreleased
+## [0.80.0-alpha] - unreleased
 
 This is an alpha version! The changes listed here are not final.
 
+### Security
+- Social: Moved Mastodon input form to start
+
 ### Changed
 - Social | Improve connect URL generation
 
@@ -1112,7 +1115,7 @@ This is an alpha version! The changes listed here are not final.
 ### Changed
 - Updated package dependencies. [#24470]
 
-[0.79.1-alpha]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.79.0...v0.79.1-alpha
+[0.80.0-alpha]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.79.0...v0.80.0-alpha
 [0.79.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.78.0...v0.79.0
 [0.78.0]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.77.2...v0.78.0
 [0.77.2]: https://github.com/Automattic/jetpack-publicize-components/compare/v0.77.1...v0.77.2

package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.79.1-alpha",
+	"version": "0.80.0-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

src/components/services/connect-form.tsx

@@ -85,7 +85,7 @@ export function ConnectForm( {
 			onSubmit={ onSubmitForm }
 		>
 			{ displayInputs ? (
-				<div className={ styles[ 'fields-wrapper' ] }>
+				<div className={ clsx( styles[ 'fields-wrapper' ], styles.input ) }>
 					<CustomInputs service={ service } />
 				</div>
 			) : null }

src/components/services/style.module.scss

@@ -204,6 +204,10 @@
 		width: 100%;
 		gap: 1rem;
 
+		&.input {
+			justify-content: flex-start;
+		}
+
 		@include break-medium {
 			flex-direction: row;
 		}