From aae4b29b706c184e8fcefe72df8ad7beabd10e41 Mon Sep 17 00:00:00 2001
From: Raphael Ferrand <goldenraphti@users.noreply.github.com>
Date: Thu, 7 Sep 2023 16:13:37 +0200
Subject: [PATCH] SWED-2230 style topbar iteration

---
 src/less/components/topbar.less         | 34 +++++++++++++++----------
 src/less/documentation-swedbankpay.less | 13 +++++++++-
 2 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less
index 09e0198128..2cfceedc50 100644
--- a/src/less/components/topbar.less
+++ b/src/less/components/topbar.less
@@ -156,6 +156,8 @@
 					flex-direction: column;
 					align-items: stretch;
 					padding: var(--topbar-opened-padding, 24px)
+						calc(var(--topbar-opened-padding-body, 30px) - 10px)
+						var(--topbar-opened-padding, 24px)
 						var(--topbar-opened-padding-body, 30px);
 					flex: 1;
 					border-top: 1px solid var(--gray);
@@ -205,6 +207,10 @@
 						width: var(--topbar-spacing-horizontal, 32px);
 						background-color: var(--gray);
 						border: transparent;
+
+						> i {
+							font-size: 24px;
+						}
 					}
 				}
 
@@ -255,7 +261,7 @@
 							content: "";
 							position: absolute;
 							background-color: currentcolor;
-							height: 2px;
+							height: 3px;
 							bottom: -4px;
 							left: 0;
 							right: 0;
@@ -361,21 +367,23 @@
 					);
 					margin: var(--topbar-links-container-spacing, 60px);
 					padding: 0;
-					overflow-y: auto;
-					scrollbar-width: thin;
-					scrollbar-color: var(--brown-soft) transparent;
 
-					&::-webkit-scrollbar {
-						background-color: transparent;
-						width: 10px;
-					}
+					.topbar-modal-body {
+						overflow-y: auto;
+						scrollbar-width: thin;
+						scrollbar-color: var(--brown-soft) transparent;
+						scrollbar-gutter: stable;
+
+						&::-webkit-scrollbar {
+							background-color: transparent;
+							width: 10px;
+						}
 
-					&::-webkit-scrollbar-thumb {
-						background: var(--brown-soft);
-						border-radius: 5rem;
-					}
+						&::-webkit-scrollbar-thumb {
+							background: var(--brown-soft);
+							border-radius: 5rem;
+						}
 
-					.topbar-modal-body {
 						> a,
 						> a:not(.pinned) {
 							display: flex;
diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less
index e8b0f30a1e..e73caa6cfb 100644
--- a/src/less/documentation-swedbankpay.less
+++ b/src/less/documentation-swedbankpay.less
@@ -1052,6 +1052,17 @@
 						}
 					}
 				}
+
+				@supports not selector(:has(a, b)) {
+					+ div.d-flex > div.d-flex {
+						max-width: 100%;
+					}
+				}
+				@supports selector(:has(a, b)) {
+					+ div > div:has(> .component-preview) {
+						max-width: 100%;
+					}
+				}
 			}
 
 			.component-preview {
@@ -1827,7 +1838,7 @@
 		.topbar {
 			z-index: calc(var(--sidebar-z-index, 400) - 1);
 
-			+ main {
+			&.legacy + main {
 				height: 10rem;
 				background-color: @light-gray;
 			}