💄 Fix settings-container alignment & width

modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss

@@ -1,3 +1,8 @@
+// Configuration for this module.
+$width_container: 938px;
+$width_header: 280px;
+$width_gap: 24px;
+
 /*
  Styles the `SettingsCard` layout component.
 
@@ -14,9 +19,9 @@
 	--card-layout: block;
 
 	@media screen and (min-width: 960px) {
-		--card-width-header: 280px;
-		--card-width-content: 610px;
-		--card-gap: 24px;
+		--card-width-header: #{$width_header};
+		--card-width-content: #{$width_container - $width_header - $width_gap};
+		--card-gap: #{$width_gap};
 		--card-layout: flex;
 	}
 
@@ -46,6 +51,7 @@
 		&.ppcp--is-card {
 			max-width: var(--card-width-content);
 			border: 1px solid var(--color-gray-200);
+			width: 100%;
 			border-radius: 4px;
 			padding: 24px;
 		}

modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss

@@ -1,28 +1,26 @@
-.ppcp-r {
-	&-container {
-		max-width: var(--max-container-width, none);
-		margin-right: auto;
-	}
+.ppcp-r-container {
+	max-width: var(--max-container-width, none);
+	margin: 0 auto 0 35px;
+}
 
-	&-inner-container {
-		margin-left: auto;
-		margin-right: auto;
-		padding: 0 16px 48px;
-		box-sizing: content-box;
+.ppcp-r-inner-container {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 0 16px 48px;
+	box-sizing: content-box;
 
-		@media screen and (max-width: 480px) {
-			padding-bottom: 36px;
-		}
+	@media screen and (max-width: 480px) {
+		padding-bottom: 36px;
 	}
+}
 
-	&-settings {
-		 > * {
-			margin-bottom: $card-vertical-gap;
-		}
+.ppcp-r-settings {
+	> * {
+		margin-bottom: $card-vertical-gap;
+	}
 
-		 > *:not(:last-child) {
-			padding-bottom: $card-vertical-gap;
-			border-bottom: 1px solid $color-gray-200;
-		}
+	> *:not(:last-child) {
+		padding-bottom: $card-vertical-gap;
+		border-bottom: 1px solid $color-gray-200;
 	}
 }

modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss

@@ -4,7 +4,6 @@
 
 	max-width: var(--max-container-width);
 	transition: max-width 0.2s;
-	padding:0 35px;
 
 	.components-tab-panel__tabs {
 		box-shadow: 0 -1px 0 0 $color-gray-400 inset;