diff --git a/.changeset/eight-gorillas-rescue.md b/.changeset/eight-gorillas-rescue.md new file mode 100644 index 000000000..3650f6106 --- /dev/null +++ b/.changeset/eight-gorillas-rescue.md @@ -0,0 +1,5 @@ +--- +'@primer/react-brand': patch +--- + +Allow `AnchorNav` links to wrap to the next line in the expanded list on narrow viewports. diff --git a/packages/react/src/AnchorNav/AnchorNav.module.css b/packages/react/src/AnchorNav/AnchorNav.module.css index ac1062ac2..aceeab472 100644 --- a/packages/react/src/AnchorNav/AnchorNav.module.css +++ b/packages/react/src/AnchorNav/AnchorNav.module.css @@ -134,7 +134,7 @@ */ .AnchorNav-link { display: flex; - width: calc(100% - 80px); + width: 100%; text-decoration: none; height: 48px; align-items: center; @@ -206,7 +206,6 @@ letter-spacing: var(--brand-heading-letterSpacing-200); color: var(--brand-color-text-default); transition: color var(--brand-animation-easing-glide) var(--brand-animation-duration-faster); - white-space: nowrap; position: relative; } @@ -252,6 +251,10 @@ /* Large breakpoint and up */ @media screen and (min-width: 63.25rem) { + .AnchorNav-link-label { + white-space: nowrap; + } + .AnchorNav-link-label::after { content: ''; position: absolute; diff --git a/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Mobile-viewport-t-59933--AnchorNav-Narrow-view-menu-open-mobile-1-linux.png b/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Mobile-viewport-t-59933--AnchorNav-Narrow-view-menu-open-mobile-1-linux.png index 14b54a63b..624dbdfbd 100644 Binary files a/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Mobile-viewport-t-59933--AnchorNav-Narrow-view-menu-open-mobile-1-linux.png and b/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Mobile-viewport-t-59933--AnchorNav-Narrow-view-menu-open-mobile-1-linux.png differ diff --git a/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Tablet-viewport-t-c7556--AnchorNav-Regular-view-menu-open-tablet-1-linux.png b/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Tablet-viewport-t-c7556--AnchorNav-Regular-view-menu-open-tablet-1-linux.png index 3f314147f..0dbcb1765 100644 Binary files a/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Tablet-viewport-t-c7556--AnchorNav-Regular-view-menu-open-tablet-1-linux.png and b/packages/react/src/AnchorNav/AnchorNav.visual.spec.ts-snapshots/Visual-Comparison-AnchorNav-Tablet-viewport-t-c7556--AnchorNav-Regular-view-menu-open-tablet-1-linux.png differ