Hacky full-width fix

Automattic · Oct 13, 2017 · a49fb1d · a49fb1d
1 parent b7f3c1c
commit a49fb1d
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 47 deletions.
diff --git a/client/my-sites/site-settings/disconnect-site/confirm.jsx b/client/my-sites/site-settings/disconnect-site/confirm.jsx
@@ -23,21 +23,23 @@ const ConfirmDisconnection = ( { siteId, siteSlug, translate } ) => {
 	}
 
 	return (
-		<Main className="disconnect-site__confirm disconnect-site site-settings">
-			<DocumentHead title={ translate( 'Site Settings' ) } />
-			<FormattedHeader
-				headerText={ translate( 'Confirm Disconnection' ) }
-				subHeaderText={ translate(
-					'Confirm that you want to disconnect your site from WordPress.com.'
-				) }
-			/>
-			<DisconnectJetpack
-				disconnectHref="/stats"
-				isBroken={ false }
-				siteId={ siteId }
-				stayConnectedHref={ '/settings/manage-connection/' + siteSlug }
-			/>
-		</Main>
+		<div className="disconnect-site__confirm disconnect-site site-settings">
+			<Main>
+				<DocumentHead title={ translate( 'Site Settings' ) } />
+				<FormattedHeader
+					headerText={ translate( 'Confirm Disconnection' ) }
+					subHeaderText={ translate(
+						'Confirm that you want to disconnect your site from WordPress.com.'
+					) }
+				/>
+				<DisconnectJetpack
+					disconnectHref="/stats"
+					isBroken={ false }
+					siteId={ siteId }
+					stayConnectedHref={ '/settings/manage-connection/' + siteSlug }
+				/>
+			</Main>
+		</div>
 	);
 };
 

diff --git a/client/my-sites/site-settings/disconnect-site/index.jsx b/client/my-sites/site-settings/disconnect-site/index.jsx
@@ -26,17 +26,19 @@ class DisconnectSite extends Component {
 			return <Placeholder />;
 		}
 		return (
-			<Main className="disconnect-site site-settings">
-				<DocumentHead title={ translate( 'Site Settings' ) } />
-				<FormattedHeader
-					headerText={ translate( 'Disconnect Site' ) }
-					subHeaderText={ translate(
-						'Tell us why you want to disconnect your site from WordPress.com.'
-					) }
-				/>
-				<Card className="disconnect-site__card"> </Card>
-				<SkipSurvey />
-			</Main>
+			<div className="disconnect-site site-settings">
+				<Main>
+					<DocumentHead title={ translate( 'Site Settings' ) } />
+					<FormattedHeader
+						headerText={ translate( 'Disconnect Site' ) }
+						subHeaderText={ translate(
+							'Tell us why you want to disconnect your site from WordPress.com.'
+						) }
+					/>
+					<Card className="disconnect-site__card"> </Card>
+					<SkipSurvey />
+				</Main>
+			</div>
 		);
 	}
 }

diff --git a/client/my-sites/site-settings/disconnect-site/style.scss b/client/my-sites/site-settings/disconnect-site/style.scss
@@ -1,34 +1,33 @@
+/** @format */
 .disconnect-site {
 	&.site-settings {
-	position: fixed;
-  top: 40%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+		// Bit hacky -- compensate the padding added for the sidebar (which we aren't showing here).
+		margin-left: -340px;
 	}
 }
 
 .disconnect-site__card {
-		position: relative;
-		padding: 24px;
+	position: relative;
+	padding: 24px;
 
-		@include breakpoint( "<480px" ) {
-			max-width: 300px;
-		}
+	@include breakpoint( '<480px' ) {
+		max-width: 300px;
+	}
 
-		@include breakpoint( "<660px" ) {
-			margin-top: 2em;
-			max-width: 500px;
-		}
+	@include breakpoint( '<660px' ) {
+		margin-top: 2em;
+		max-width: 500px;
+	}
 
-		@include breakpoint( ">660px" ) {
-			margin-top: 17px;
-			max-width: 800px;
-		}
+	@include breakpoint( '>660px' ) {
+		margin-top: 17px;
+		max-width: 800px;
 	}
+}
 
 .disconnect-site__skip-survey {
-		&.main {
-			margin: 16px 0 24px 0;
-			text-align: center;
-		}
+	&.main {
+		margin: 16px 0 24px 0;
+		text-align: center;
+	}
 }