diff --git a/packages/components/src/components/drawer/drawer.scss b/packages/components/src/components/drawer/drawer.scss index ca2a6b243b8..9d7f57f67a9 100644 --- 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 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;