fix: some issues for mobile layouts (#3455)

db-ui · Jan 30, 2025 · 171b6fa · 171b6fa
1 parent 4801322
commit 171b6fa
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss
@@ -93,8 +93,8 @@ $spacings: (
 			--db-drawer-content-padding-inline,
 			#{map.get($spacing, "inline")}
 		);
-		max-block-size: fit-content;
-		overflow: auto;
+		// TODO: Evaluate whether we need overflow: hidden and that for only specifically set y here.
+		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
@@ -162,7 +162,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} +

diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx
@@ -326,7 +326,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
@@ -512,12 +512,19 @@ h6 {
 
 .link-containers {
 	display: grid;
-	grid-template-areas: "previous next";
+	grid-template-areas:
+			"previous previous"
+			"next next";
 	gap: variables.$db-spacing-fixed-md;
 	justify-content: space-between;
 
-	a {
-		text-decoration: none;
+	@include screen-sizes.screen("md") {
+			grid-template-areas: "previous next";
+		}
+
+		a {
+			text-decoration: none;
+
 	}
 
 	.previous-link-container,
@@ -527,6 +534,7 @@ h6 {
 
 		small {
 			color: colors.$db-informational-bg-inverted-contrast-high-default;
+			overflow-wrap: anywhere;
 		}
 	}
 
@@ -546,6 +554,7 @@ h6 {
 
 .breadcrumb-container {
 	display: flex;
+	overflow-x: auto;
 	align-content: center;
 	align-items: center;
 	padding-block: variables.$db-spacing-fixed-sm;