Jetpack pages: Adjust maximum container width to 1040px

projects/js-packages/base-styles/changelog/ui-max-width-1040px-all-pages

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+UI: Make sure most admin pages have 1040px of maximum width

projects/js-packages/base-styles/style.scss

@@ -51,8 +51,8 @@ $wp-gray-dark: #23282d;
 .jp-wrap {
 	display: flex;
 	align-items: center;
+	justify-content: center;
 	flex-wrap: wrap;
-	max-width: 1128px;
 	margin: 0 auto;
 }
 
@@ -70,7 +70,7 @@ $wp-gray-dark: #23282d;
 
 	@include for-tablet-up {
 		grid-template-columns: repeat(12, 1fr);
-		max-width: 1128px;
+		max-width: 1040px;
 		margin: 0 24px;
 	}
 }

projects/js-packages/components/changelog/ui-max-width-1040px-all-pages

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+UI: Make sure most admin pages have 1040px of maximum width

projects/js-packages/components/components/jetpack-footer/style.scss

@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	align-items: center;
 
-	max-width: 1128px;
+	max-width: 1040px;
 	width: 100%;
 
 	color: var(--jp-black);

projects/js-packages/idc/changelog/ui-max-width-1040px-all-pages

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+UI: Make sure most admin pages have 1040px of maximum width

projects/js-packages/idc/components/idc-screen/style.scss

@@ -3,22 +3,40 @@
 .jp-idc__idc-screen {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 	background: #fff;
-	padding: 10px;
 	box-shadow: 0 0 40px rgba(0, 0, 0, 0.04);
 	border-radius: 4px;
-	border-left: 4px solid #e68b28;
-	max-width: 1128px;
 	box-sizing: border-box;
 	margin: 0 auto;
 
-	&.jp-idc__idc-screen__success {
-		border-color: #069e08;
-	}
+	padding: 10px;
 
 	@include mixins.break-small {
 		padding: 48px;
 	}
 
+	width: 100%;
+	max-width: 1040px;
+
+	position: relative;
+	overflow: hidden;
+
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 4px;
+		height: 100%;
+		background: #e68b28;
+	}
+
+	&.jp-idc__idc-screen__success {
+
+		&::before {
+			background: #069e08;
+		}
+	}
+
 	.jp-idc__idc-screen__header {
 		display: flex;
 		align-items: center;
@@ -70,7 +88,6 @@
 
 	.jp-idc__idc-screen__cards {
 		display: flex;
-		flex-wrap: wrap;
 		flex-direction: column;
 		align-items: center;
 
@@ -170,7 +187,6 @@
 
 	.jp-idc__idc-screen__card-migrated {
 		display: flex;
-		flex-wrap: wrap;
 		flex-direction: column;
 		align-items: center;
 		width: 100%;

projects/packages/backup/changelog/ui-max-width-1040px-all-pages

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+UI: Make sure most admin pages have 1040px of maximum width

projects/packages/backup/src/js/components/Admin/index.js

@@ -329,7 +329,7 @@ const LoadedState = ( {
 
 	if ( ! capabilitiesLoaded ) {
 		return (
-			<Container horizontalSpacing={ 5 } fluid>
+			<Container horizontalSpacing={ 5 }>
 				<Col>
 					<div className="jp-wrap jp-content backup-panel">
 						<BackupsLoadingPlaceholder />
@@ -341,7 +341,7 @@ const LoadedState = ( {
 
 	if ( hasBackupPlan ) {
 		return (
-			<Container horizontalSpacing={ 5 } fluid>
+			<Container horizontalSpacing={ 5 }>
 				<Col>
 					<Backups />
 				</Col>

projects/packages/backup/src/js/components/backups-style.scss

@@ -277,6 +277,7 @@
 
 	.jp-row {
 		gap: 16px;
+		margin: 0;
 	}
 
 	a.button {

projects/packages/my-jetpack/_inc/components/my-jetpack-screen/styles.module.scss

@@ -2,18 +2,6 @@
 
 .my-jetpack-screen {
 	overflow-x: hidden;
-
-	:global(.jp-admin-page-header) {
-		padding-inline: 0.5rem;
-
-		@include gb.break-medium {
-			padding-inline: 2rem;
-		}
-
-		@include gb.break-large {
-			padding-inline: 1.5rem;
-		}
-	}
 }
 
 .heading {

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/footer.tsx

@@ -0,0 +1,10 @@
+import { Container } from '@automattic/jetpack-components';
+import styles from './styles.module.scss';
+
+export const MyJetpackTabPanelFooter = ( { children }: { children: React.ReactNode } ) => {
+	return (
+		<Container horizontalSpacing={ 4 } className={ styles[ 'my-jetpack-tab-panel-footer' ] }>
+			{ children }
+		</Container>
+	);
+};

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/footer.tsx

@@ -1,7 +1,9 @@
+import { Col } from '@automattic/jetpack-components';
 import { getAdminUrl } from '@automattic/jetpack-script-data';
 import { ExternalLink } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback } from 'react';
+import { MyJetpackTabPanelFooter } from '../footer';
 import styles from './styles.module.scss';
 import { useHelpTracking } from './use-help-tracking';
 
@@ -26,51 +28,50 @@ export function HelpFooter() {
 	}, [ trackHelpRequest ] );
 
 	return (
-		<div className={ styles.footer }>
-			{ /* Needed to show different background colour */ }
-			<div className={ styles[ 'footer-inner' ] }>
-				<section>
-					<h3>{ __( 'Real humans. Real support.', 'jetpack-my-jetpack' ) }</h3>
-					<p className={ styles.description }>
-						{ __(
-							'We are the people behind WordPress.com, WooCommerce, Jetpack, Simplenote, and more. We believe in making the web a better place.',
-							'jetpack-my-jetpack'
-						) }
-					</p>
-					<ExternalLink
-						className={ styles[ 'footer-learn-more' ] }
-						href="https://automattic.com/about/"
-						onClick={ handleLearnMoreClick }
-					>
-						{ __( 'Learn more about us', 'jetpack-my-jetpack' ) }
-					</ExternalLink>
+		<MyJetpackTabPanelFooter>
+			<Col>
+				<h3 className={ styles[ 'footer-title' ] }>
+					{ __( 'Real humans. Real support.', 'jetpack-my-jetpack' ) }
+				</h3>
+				<p className={ styles.description }>
+					{ __(
+						'We are the people behind WordPress.com, WooCommerce, Jetpack, Simplenote, and more. We believe in making the web a better place.',
+						'jetpack-my-jetpack'
+					) }
+				</p>
+				<ExternalLink
+					className={ styles[ 'footer-learn-more' ] }
+					href="https://automattic.com/about/"
+					onClick={ handleLearnMoreClick }
+				>
+					{ __( 'Learn more about us', 'jetpack-my-jetpack' ) }
+				</ExternalLink>
 
-					<nav
-						className={ styles[ 'footer-nav' ] }
-						aria-label={ __( 'Useful links', 'jetpack-my-jetpack' ) }
-					>
-						<h4>{ __( 'Useful links', 'jetpack-my-jetpack' ) }</h4>
-						<ul>
-							<li>
-								<a
-									href={ getAdminUrl( 'admin.php?page=jetpack_modules' ) }
-									onClick={ handleAllModulesClick }
-								>
-									{ __( 'All Jetpack modules', 'jetpack-my-jetpack' ) }
-								</a>
-							</li>
-							<li>
-								<a
-									href={ getAdminUrl( 'admin.php?page=jetpack-debugger' ) }
-									onClick={ handleDebugInfoClick }
-								>
-									{ __( 'Debug information', 'jetpack-my-jetpack' ) }
-								</a>
-							</li>
-						</ul>
-					</nav>
-				</section>
-			</div>
-		</div>
+				<nav
+					className={ styles[ 'footer-nav' ] }
+					aria-label={ __( 'Useful links', 'jetpack-my-jetpack' ) }
+				>
+					<h4>{ __( 'Useful links', 'jetpack-my-jetpack' ) }</h4>
+					<ul>
+						<li>
+							<a
+								href={ getAdminUrl( 'admin.php?page=jetpack_modules' ) }
+								onClick={ handleAllModulesClick }
+							>
+								{ __( 'All Jetpack modules', 'jetpack-my-jetpack' ) }
+							</a>
+						</li>
+						<li>
+							<a
+								href={ getAdminUrl( 'admin.php?page=jetpack-debugger' ) }
+								onClick={ handleDebugInfoClick }
+							>
+								{ __( 'Debug information', 'jetpack-my-jetpack' ) }
+							</a>
+						</li>
+					</ul>
+				</nav>
+			</Col>
+		</MyJetpackTabPanelFooter>
 	);
 }

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/help/styles.module.scss

@@ -31,48 +31,11 @@
 	}
 }
 
-.footer {
-	width: 100vw;
-	margin-inline-start: calc(-50vw + 50%);
-	background: var(--studio-white, #fff);
-
-	/* Center the content within the full-width background */
-	display: flex;
-	justify-content: center;
-
-	// 1128 + 3rem (96px) = 1224px + 64px (no idea what that is) = 1288px
-	@media (max-width: 1288px) {
-		// I have to hardcode --max-container-width because
-		// media queries don't work with CSS variables
-		margin-inline-start: -3rem; // Match the parent's padding-inline
-		margin-inline-end: -3rem;
-		width: calc(100% + 6rem); // Compensate for the negative margins
-		padding-inline: 3rem;
-	}
-
-	section {
-		max-width: 35rem;
-	}
-
-	h3 {
-		font-size: 1.25rem;
-		line-height: 24px;
-		font-weight: 500;
-		margin-block: 0 1.5rem;
-	}
-}
-
-.footer-inner {
-	padding-top: 2.5rem;
-	padding-bottom: 1.5rem;
-	width: 100%;
-	padding-inline: 3rem;
-
-	@include parent.full-width-container;
-
-	@media ( max-width: 1288px ) {
-		padding-inline: 0;
-	}
+.footer-title {
+	font-size: 1.25rem;
+	line-height: 24px;
+	font-weight: 500;
+	margin-block: 0 1.5rem;
 }
 
 .footer-learn-more {

projects/packages/my-jetpack/_inc/components/my-jetpack-tab-panel/index.tsx

@@ -1,3 +1,4 @@
+import { Col, Container } from '@automattic/jetpack-components';
 import { TabPanel } from '@wordpress/components';
 import clsx from 'clsx';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -86,17 +87,21 @@ export function MyJetpackTabPanel() {
 	const tabs = useMemo( () => getMyJetpackSections(), [] );
 
 	return (
-		<TabPanel
-			key={ tabKey }
-			className={ clsx(
-				styles[ 'tab-panel' ],
-				styles[ 'my-jetpack-tab-panel--full-width' ],
-				'jetpack-my-jetpack-tab-panel'
-			) }
-			initialTabName={ currentTab }
-			onSelect={ onTabSelect }
-			children={ tabRenderer }
-			tabs={ tabs }
-		/>
+		<Container horizontalSpacing={ 0 }>
+			<Col>
+				<TabPanel
+					key={ tabKey }
+					className={ clsx(
+						styles[ 'tab-panel' ],
+						styles[ 'my-jetpack-tab-panel--full-width' ],
+						'jetpack-my-jetpack-tab-panel'
+					) }
+					initialTabName={ currentTab }
+					onSelect={ onTabSelect }
+					children={ tabRenderer }
+					tabs={ tabs }
+				/>
+			</Col>
+		</Container>
 	);
 }