chore: fixes expansion and spacing to match design

Author: geotrev

packages/chrome/src/styled/nav/StyledBrandmarkNavItem.ts

@@ -16,7 +16,7 @@ export const StyledBrandmarkNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-version': PACKAGE_VERSION,
   as: 'li'
 })`
-  flex: 1;
+  flex: 0;
   order: 1;
   opacity: 0.3;
   margin-top: auto;

packages/chrome/src/styled/nav/StyledLogoNavItem.ts

@@ -54,7 +54,7 @@ export const StyledLogoNavItem = styled(StyledBaseNavItem).attrs({
   'data-garden-version': PACKAGE_VERSION,
   as: 'li'
 })<IStyledLogoNavItemProps>`
-  flex: 1;
+  flex: 0;
   order: 0;
   opacity: 1;
   cursor: default;

packages/chrome/src/styled/nav/StyledNav.ts

@@ -40,7 +40,9 @@ export const StyledNav = styled.nav.attrs<IStyledNavProps>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledNavProps>`
+  display: flex;
   position: relative;
+  flex-direction: column;
   width: ${props => (props.isExpanded ? getExpandedNavWidth : getNavWidth)};
   font-size: ${props => props.theme.fontSizes.md};
 

packages/chrome/src/styled/nav/StyledNavButton.ts

@@ -81,8 +81,9 @@ interface IStyledNavItemProps extends ThemeProps<DefaultTheme> {
  * 2. Button reset
  * 3. Override `focusStyles` outline (in `colorStyles`)
  * 4. Use of negative offset to create an inset outline
+ * 5. Overrides flex default `min-width: auto`
  */
-export const StyledNavButton = styled(StyledBaseNavItem as 'button').attrs({
+export const StyledNavButton = styled(StyledBaseNavItem).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
   as: 'button'
@@ -91,6 +92,7 @@ export const StyledNavButton = styled(StyledBaseNavItem as 'button').attrs({
   justify-content: ${props => props.isExpanded && 'start'};
   margin: 0; /* [2] */
   cursor: ${props => (props.isCurrent ? 'default' : 'pointer')};
+  min-width: 0; /* [5] */
   text-align: ${props => props.isExpanded && 'inherit'};
 
   &:hover,