fix: allow navbar title to wrap to multiple lines (BDS-424, BDS-367)

Also adjusts flex behavior of priority nav
boltdesignsystem · Jun 15, 2018 · 44ee933 · 44ee933
1 parent 5b1e26f
commit 44ee933
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 0 deletions.
diff --git a/packages/components/bolt-nav-priority/nav-priority.scss b/packages/components/bolt-nav-priority/nav-priority.scss
@@ -10,6 +10,8 @@ bolt-nav-priority {
   position: relative;
   align-self: center;
   padding-bottom: var(--bolt-vspacing);
+  flex-shrink: 2; // shrink faster than other components in tight spots
+  flex-grow: 0.5; // grow if space is available, but at 1/2 as much as normal
 
   @supports (display: contents) {
     @media screen and (max-width: #{bolt-breakpoint(xsmall)}) {

diff --git a/packages/components/bolt-navbar/src/navbar.scss b/packages/components/bolt-navbar/src/navbar.scss
@@ -120,6 +120,7 @@ bolt-navbar {
   align-self: center;
   flex-shrink: 0;
   display: flex;
+  flex-shrink: 1; // make sure the title can wrap to multiple lines and shrink if needed.
   flex-wrap: nowrap;
   align-items: center;
   color: inherit;
@@ -169,6 +170,8 @@ bolt-navbar {
 }
 
 .c-bolt-navbar__title-text {
+  white-space: normal; // wrap to multiple lines if needed
+  flex-flow: wrap;
   @include bolt-font-size(large);
   @include bolt-font-weight(semibold);