From ffc27ca9597dc9ec86ceda0a2b16b61391a0cbee Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 4 Dec 2024 12:59:50 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Responsive=20changes=20for=20nav?=
 =?UTF-8?q?=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_navigation.scss      | 24 +++++++++++++++----
 .../css/components/screens/_fullscreen.scss   |  3 ++-
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
index e149026cf..a766433e0 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_navigation.scss
@@ -80,18 +80,32 @@
 	}
 
 	&.is-scrolled {
-		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85,93,102,.3);
+		box-shadow: 0 -1px 0 0 $color-gray-300 inset, 0 8px 8px 0 rgba(85, 93, 102, .3);
 	}
 
-	@media screen and (max-width: 480px) {
-		padding: 24px 35px;
+	@media screen and (max-width: 782px) {
+		padding: 10px 12px;
 
 		.ppcp-r-navigation {
-			flex-wrap: wrap;
 			row-gap: 8px;
+			white-space: nowrap;
+
+			&--right {
+				position: absolute;
+				right: 10px;
+				z-index: 10;
+				background: var(--ppcp-color-app-bg);
+				box-shadow: -5px 0 8px var(--ppcp-color-app-bg);
+			}
 
 			&--progress-bar {
-				display: none;
+				height: 2px;
+			}
+
+			.components-button.is-title {
+				.title {
+					margin-left: 4px;
+				}
 			}
 		}
 	}
diff --git a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss
index 41568fbc2..214cc11d7 100644
--- a/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/_fullscreen.scss
@@ -2,7 +2,8 @@ body:has(.ppcp-r-container--settings),
 body:has(.ppcp-r-container--onboarding) {
 	background-color: var(--ppcp-color-app-bg) !important;
 
-	.woocommerce-layout {
+	.woocommerce-layout,
+	#woocommerce-layout__primary {
 		padding: 0 !important;
 	}