feat: improve responsiveness of navbar

packages/components/navbar/src/Navbar.styles.ts

@@ -62,7 +62,12 @@ export const getNavbarStyles = ({
       },
     },
   }),
-
+  promoNavigationWrapper: css({
+    display: 'none',
+    [mqs.small]: {
+      display: 'flex',
+    },
+  }),
   account: css({
     display: 'none',
     [mqs.xsmall]: {

packages/components/navbar/src/Navbar.tsx

@@ -108,7 +108,14 @@ function _Navbar(props: ExpandProps<NavbarProps>, ref: React.Ref<HTMLElement>) {
           )}
         </Flex>
         <Flex alignItems="center" gap="spacingXs">
-          <Flex alignItems="center">{promotions}</Flex>
+          <Flex
+            alignItems="center"
+            className={styles.promoNavigationWrapper}
+            aria-label="Promotions"
+            gap="spacingXs"
+          >
+            {promotions}
+          </Flex>
           <Flex alignItems="center">{switcher}</Flex>
           <Flex alignItems="center" gap="spacingXs">
             {secondaryNavigation && (

packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.styles.ts

@@ -14,6 +14,7 @@ export const getNavbarSwitcherStyles = ({
   text: css({
     color: 'currentcolor',
     fontWeight: 'inherit',
+    lineHeight: 'unset',
   }),
 
   navbarSwitcher: ({ showSpaceEnv }: { showSpaceEnv: boolean }) =>
@@ -65,7 +66,7 @@ export const getNavbarSwitcherStyles = ({
     },
     maxWidth: '15vw',
     [mqs.xsmall]: {
-      maxWidth: '50vw',
+      maxWidth: '25vw',
     },
     [mqs.small]: {
       maxWidth: '10vw',
@@ -82,11 +83,42 @@ export const getNavbarSwitcherStyles = ({
     },
   }),
 
+  switcherSpaceNameStart: css({
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    lineHeight: '1.25rem',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    width: '5ch',
+    [mqs.small]: {
+      width: 'unset',
+    },
+  }),
+
   switcherSpaceNameTruncation: css({
-    flexShrink: 1,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
+    lineHeight: '1.25rem',
+    verticalAlign: 'middle',
+    display: 'none',
+    [mqs.xsmall]: {
+      display: 'inline-block',
+      width: '5ch',
+    },
+    [mqs.medium]: {
+      width: 'unset',
+    },
+  }),
+
+  switcherSpaceNameEnd: css({
+    display: 'none',
+    [mqs.medium]: {
+      display: 'inline-block',
+      verticalAlign: 'middle',
+      lineHeight: '1.25rem',
+    },
   }),
 });
 

packages/components/navbar/src/NavbarSwitcher/NavbarSwitcher.tsx

@@ -87,11 +87,11 @@ const SwitcherLabel = ({ value, styles }: SwitcherLabelProps) => {
 
   return start !== undefined ? (
     <Text className={styles.text}>
-      <span>{start}</span>
+      <span className={styles.switcherSpaceNameStart}>{start}</span>
       {middle && (
         <span className={styles.switcherSpaceNameTruncation}>{middle}</span>
       )}
-      {end && <span>{end}</span>}
+      {end && <span className={styles.switcherSpaceNameEnd}>{end}</span>}
     </Text>
   ) : (
     <Text className={styles.text}>{value}</Text>

packages/components/navbar/src/index.ts

@@ -3,3 +3,4 @@ export { NAVBAR_HEIGHT } from './constants';
 export { Navbar } from './CompoundNavbar';
 export type { NavbarProps } from './Navbar';
 export { getNavbarItemActiveStyles } from './NavbarItem/NavbarItem.styles';
+export { mqs as navbarMediaQueries } from './utils.styles';

packages/components/navbar/stories/Navbar.stories.tsx

@@ -309,7 +309,12 @@ export const Complete: Story<{ initials?: string; avatar?: string }> = (
   return (
     <Navbar
       mobileNavigation={<MobileMenu />}
-      promotions={<TextLink>Upgrade</TextLink>}
+      promotions={
+        <>
+          <TextLink>Upgrade</TextLink>
+          <Navbar.Item title="Feedback"></Navbar.Item>
+        </>
+      }
       switcher={<Switcher />}
       mainNavigation={<MainItems />}
       account={
@@ -320,7 +325,6 @@ export const Complete: Story<{ initials?: string; avatar?: string }> = (
       }
       secondaryNavigation={
         <>
-          <Navbar.Item title="Feedback"></Navbar.Item>
           <Navbar.Item label="Quick Search" icon={<MagnifyingGlassIcon />} />
           <Navbar.Item label="Help Menu" icon={<QuestionIcon />}>
             <Navbar.MenuItem