Standardize margin for content panels and headers (#96892)

* Standardize margin for content panels and headers and fixed mobile issues * Align W logo with the content padding * Improved the mobile experience as well * Fix W logo alignment --------- Co-authored-by: Luis Felipe Zaguini <[email protected]>
Automattic · Nov 30, 2024 · 48301e1 · 48301e1
1 parent c25182f
commit 48301e1
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 53 deletions.
diff --git a/client/blocks/plugins-scheduled-updates-multisite/styles.scss b/client/blocks/plugins-scheduled-updates-multisite/styles.scss
@@ -3,8 +3,14 @@
 $brand-display: "SF Pro Display", sans-serif;
 
 .plugins-update-manager-multisite {
-	@media screen and (max-width: $break-medium) {
-		margin: 1rem;
+	padding-inline: 48px;
+
+	@media (max-width: $break-medium) {
+		padding-inline: 2rem;
+	}
+
+	@media (max-width: $break-small) {
+		padding-inline: 16px;	
 	}
 
 	&__header {
@@ -44,7 +50,6 @@ $brand-display: "SF Pro Display", sans-serif;
 	.plugins-update-manager-multisite-filters,
 	.plugins-update-manager-multisite-table-container {
 		@media screen and (min-width: $break-xhuge) {
-			max-width: 1400px;
 			margin: 0 auto;
 		}
 		@media screen and (min-width: $break-large) {
@@ -170,14 +175,3 @@ $brand-display: "SF Pro Display", sans-serif;
 		}
 	}
 }
-
-main.scheduled-updates-list {
-	.plugins-update-manager-multisite {
-		&__header-main {
-			@media screen and (min-width: $break-xhuge) {
-				max-width: 1400px;
-				padding-inline: 64px;
-			}
-		}
-	}
-}
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
@@ -544,7 +544,7 @@ body.is-mobile-app-view {
 		padding: 0;
 
 		&:not(.masterbar__item--always-show-content) {
-			width: 52px;
+			width: 46px;
 		}
 		// Show gravatar content
 		&:not(.masterbar__item-howdy) .masterbar__item-content {
@@ -610,10 +610,6 @@ body.is-mobile-app-view {
 		flex: 0 1 auto;
 		padding: 0;
 
-		&:not(.masterbar__item--always-show-content) {
-			width: 46px;
-		}
-
 		.masterbar__item-content {
 			display: none;
 		}

diff --git a/client/my-sites/domains/domain-management/list/style.scss b/client/my-sites/domains/domain-management/list/style.scss
@@ -149,7 +149,7 @@
 			padding-inline: 0;
 
 			.navigation-header__main {
-				padding-inline: 16px;
+				padding-inline: 21px;
 
 				@include break-mobile {
 					padding-inline: 48px;
@@ -160,7 +160,6 @@
 				max-width: 100%;
 
 				.navigation-header__main {
-					max-width: 1400px;
 					margin: 0 auto;
 					padding-inline: 48px;
 				}
@@ -241,7 +240,6 @@
 		}
 	}
 	.domains-table {
-		max-width: 1400px;
 		margin-left: auto;
 		margin-right: auto;
 
@@ -252,7 +250,7 @@
 
 
 		.domains-table-toolbar {
-			margin-inline: 0;
+			margin-inline: 5px;
 
 			@include break-mobile {
 				margin-inline: 32px;

diff --git a/client/my-sites/plugins/plugins-browser-list/style.scss b/client/my-sites/plugins/plugins-browser-list/style.scss
@@ -3,6 +3,7 @@
 
 .plugins-browser-list {
 	padding-top: 40px;
+	padding-inline: 0;
 
 	.feature-example & {
 		margin: 0;
@@ -21,11 +22,6 @@
 		}
 	}
 
-	@include breakpoint-deprecated("<660px") {
-		padding-left: 16px;
-		padding-right: 16px;
-	}
-
 	.spotlight {
 		margin-top: 20px;
 	}

diff --git a/client/my-sites/plugins/plugins-list/style.scss b/client/my-sites/plugins/plugins-list/style.scss
@@ -1,3 +1,6 @@
+@import "@wordpress/base-styles/breakpoints";
+@import "@wordpress/base-styles/mixins";
+
 body.is-section-plugins .plugin-management-wrapper.is-bulk-plugin-management {
     display: flex;
     flex-direction: column;
@@ -6,9 +9,12 @@ body.is-section-plugins .plugin-management-wrapper.is-bulk-plugin-management {
 	.navigation-header {
 		border-block-end: 1px solid var(--color-border-secondary);
 		padding-inline: 48px;
+
+        @media (max-width: 430px) {
+            padding-inline: 24px;
+        }
 
         .navigation-header__main {
-            max-width: 1400px;
             margin: auto;
         }
 	}
@@ -17,7 +23,6 @@ body.is-section-plugins .plugin-management-wrapper.is-bulk-plugin-management {
 body.is-section-plugins .plugin-management-wrapper.is-bulk-plugin-management,
 .is-section-jetpack-cloud-plugin-management .plugin-management-wrapper.is-bulk-plugin-management {
     .dataviews-wrapper {
-        max-width: 1500px;
         margin: auto;
 
         .dataviews-view-table {

diff --git a/client/my-sites/plugins/plugins-navigation-header/style.scss b/client/my-sites/plugins/plugins-navigation-header/style.scss
@@ -2,7 +2,7 @@
 @import "@wordpress/base-styles/mixins";
 
 .plugins-navigation-header.navigation-header {
-	padding-inline: 16px;
+	padding-inline: 48px;
 
 	.navigation-header__main {
 		align-items: center;
@@ -12,17 +12,17 @@
 		border-block-end: 1px solid var(--color-border-secondary);
 	}
 
-	@include break-huge {
-		padding-inline: 64px;
+	@media (max-width: $break-medium) {
+		padding-inline: 2rem;
 	}
 
-	@include break-xhuge {
-		max-width: 100%;
+	@media (max-width: $break-small) {
+		padding-inline: 16px;	
+	}
 
+	@include break-xhuge {
 		.navigation-header__main {
-			max-width: 1400px;
 			margin: 0 auto;
-			padding-inline: 64px;
 		}
 	}
 

diff --git a/client/my-sites/plugins/search-categories/style.scss b/client/my-sites/plugins/search-categories/style.scss
@@ -7,12 +7,9 @@ $search-categories-padding-top: 40px;
 	display: flex;
 	align-items: center;
 	gap: 12px;
+	padding-inline: 0;
 	padding-top: $search-categories-padding-top;
 
-	@media (max-width: 660px) {
-		padding: 0 16px;
-	}
-
 	.search-categories__searchbox {
 		max-width: 265px;
 		width: 100%;

diff --git a/client/my-sites/plugins/style.scss b/client/my-sites/plugins/style.scss
@@ -70,9 +70,14 @@ body.is-section-plugins {
 	.is-logged-in main:not(.a4a-layout):not(.a4a-layout-column) {
 		&:not(.plugins-browser),
 		&.plugins-browser .plugins-browser__content-wrapper {
-			@include break-small {
-				padding-left: 2rem;
-				padding-right: 2rem;
+			padding-inline: 48px;
+
+			@media (max-width: $break-medium) {
+				padding-inline: 2rem;
+			}
+
+			@media (max-width: $break-small) {
+				padding-inline: 16px;	
 			}
 		}
 
@@ -134,15 +139,7 @@ body.is-section-plugins {
 		.plugins-update-manager-multisite__header,
 		.plugins-update-manager-multisite-filter {
 			margin: 0;
-			padding: 1.5rem 4rem;
-
-			@include breakpoint-deprecated( "<960px" ) {
-				padding: 1rem;
-			}
-
-			@include breakpoint-deprecated( "<660px" ) {
-				padding: 1rem 0;
-			}
+			padding: 24px 0;
 		}
 
 		.plugins-update-manager-multisite__header {

diff --git a/packages/domains-table/src/domains-table/style.scss b/packages/domains-table/src/domains-table/style.scss
@@ -284,6 +284,7 @@
 .domains-table-mobile-cards {
 	overflow-y: auto;
 	max-height: calc(100vh - 326px);
+	padding-inline: 5px;
 
 	.domains-table-mobile-cards-select-all {
 		display: flex;