From 60f54d56ead20f3ba4529570c6a9a88611aa2140 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Mon, 27 Jan 2025 17:22:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Fix=20settings-container=20align?=
=?UTF-8?q?ment=20&=20width?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../reusable-components/_settings-card.scss | 12 ++++--
.../_settings-wrapper.scss | 40 +++++++++----------
.../reusable-components/_tab-navigation.scss | 1 -
3 files changed, 28 insertions(+), 25 deletions(-)
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss
index 1bedc6240..441cf4608 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss
+++ b/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;
}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
index 48753bade..90c14d734 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-wrapper.scss
+++ b/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;
}
}
diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss
index a1e07f374..92ccf41fd 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss
+++ b/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;