Social: Fix connections layout issues (#99417)

* Only show examples for not connected services

* Add back missing css

* Fix in JP cloud

Author: gmjuhasz

client/sites/marketing/connections/service-examples.scss

@@ -55,3 +55,29 @@
 .connections__sharing-service-tip {
 	margin: 1rem 0;
 }
+
+.sharing-service-examples {
+	display: grid;
+	grid-auto-columns: minmax(0, 1fr);
+	grid-auto-flow: column;
+	margin-top: 0.4rem;
+
+	@media (max-width: 660px) {
+		grid-auto-flow: row;
+		grid-gap: 2rem;
+		height: auto;
+		min-height: unset;
+	}
+
+	img {
+		max-height: 520px;
+		max-width: 100%;
+	}
+
+	>div {
+		&:has(img) {
+			margin-inline-start: auto;
+			margin-inline-end: auto;
+		}
+	}
+}

client/sites/marketing/connections/service.jsx

@@ -666,14 +666,15 @@ export class SharingService extends Component {
 							'is-placeholder': this.props.isFetching,
 						} ) }
 					>
-						<ServiceExamples
-							service={ this.props.service }
-							action={ this.performAction }
-							connectAnother={ this.connectAnother }
-							isConnecting={ this.state.isConnecting }
-							connections={ connections }
-						/>
-
+						{ 'not-connected' === connectionStatus && (
+							<ServiceExamples
+								service={ this.props.service }
+								action={ this.performAction }
+								connectAnother={ this.connectAnother }
+								isConnecting={ this.state.isConnecting }
+								connections={ connections }
+							/>
+						) }
 						{ this.isGooglePhotosMigration( connectionStatus ) && <GooglePhotosMigration /> }
 
 						{ ! this.isMailchimpService( connectionStatus ) && (