From e8c84532306a6667366c55790240186cb7ed31d5 Mon Sep 17 00:00:00 2001
From: Nicolas Merget <nicolas.merget@deutschebahn.com>
Date: Tue, 12 Nov 2024 13:44:48 +0100
Subject: [PATCH 1/2] fix: some issues for mobile layouts

---
 packages/components/src/components/drawer/drawer.scss  |  3 +--
 .../components/navigation-item/navigation-item.scss    |  2 +-
 showcases/patternhub/data/routes.tsx                   |  4 +++-
 showcases/patternhub/styles/globals.scss               | 10 +++++++++-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index ca2a6b243b8..e931ea2656a 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -93,8 +93,7 @@ $spacings: (
 			--db-drawer-content-padding-inline,
 			#{map.get($spacing, "inline")}
 		);
-		max-block-size: fit-content;
-		overflow: auto;
+		overflow-y: auto;
 	}
 }
 
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
index 663affa7925..7233bf3ea48 100644
--- a/packages/components/src/components/navigation-item/navigation-item.scss
+++ b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -160,7 +160,7 @@
 	padding: variables.$db-spacing-fixed-md;
 	inline-size: 100%;
 	position: fixed;
-	overflow-y: auto;
+	overflow: hidden auto;
 	// additional #{$db-spacing-fixed-3xs} for border
 	inset-block: calc(
 			#{component.$min-mobile-header-height} + #{variables.$db-spacing-fixed-3xs}
diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx
index de9f193419d..c12aee7b742 100644
--- a/showcases/patternhub/data/routes.tsx
+++ b/showcases/patternhub/data/routes.tsx
@@ -328,7 +328,9 @@ export const getNavigationList = (path: string) => {
 
 export const getBreadcrumb = (path: string) => {
 	const tree: NavigationItem[] = getAllNavigationItems(true);
-	return tree.filter((navItem) => path.includes(navItem.path ?? ''));
+	return tree
+		.filter((navItem) => path.includes(navItem.path ?? ''))
+		.sort((a, b) => (a.path?.length ?? 0) - (b.path?.length ?? 0));
 };
 
 export const getAllComponentGroupNames = (): string[] => {
diff --git a/showcases/patternhub/styles/globals.scss b/showcases/patternhub/styles/globals.scss
index faef0a099c8..b7210a86279 100644
--- a/showcases/patternhub/styles/globals.scss
+++ b/showcases/patternhub/styles/globals.scss
@@ -491,10 +491,16 @@ h6 {
 .link-containers {
 	& > div {
 		display: grid;
-		grid-template-areas: "previous next";
+		grid-template-areas:
+			"previous previous"
+			"next next";
 		gap: variables.$db-spacing-fixed-md;
 		justify-content: space-between;
 
+		@include screen-sizes.screen("md") {
+			grid-template-areas: "previous next";
+		}
+
 		a {
 			text-decoration: none;
 		}
@@ -507,6 +513,7 @@ h6 {
 
 		small {
 			color: colors.$db-informational-bg-inverted-contrast-high-default;
+			overflow-wrap: anywhere;
 		}
 	}
 
@@ -526,6 +533,7 @@ h6 {
 
 .breadcrumb-container {
 	display: flex;
+	overflow-x: auto;
 	align-content: center;
 	align-items: center;
 	padding-block: variables.$db-spacing-fixed-sm;

From 34242b4d50ae98c57a1acce4d9256717b85c52f1 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:54:21 +0100
Subject: [PATCH 2/2] Update drawer.scss

---
 packages/components/src/components/drawer/drawer.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
index e931ea2656a..9d7f57f67a9 100644
--- a/packages/components/src/components/drawer/drawer.scss
+++ b/packages/components/src/components/drawer/drawer.scss
@@ -93,6 +93,7 @@ $spacings: (
 			--db-drawer-content-padding-inline,
 			#{map.get($spacing, "inline")}
 		);
+		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
 		overflow-y: auto;
 	}
 }