fixup! fix(nav): polish sidebar and layout alignment

Standardise all chevron icons to -solid variant at 12px, use md
breakpoints for breadcrumb responsiveness, and allow breadcrumbs to wrap.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: m-hulbert

src/components/Layout/Breadcrumbs.tsx

@@ -6,7 +6,7 @@ import cn from '@ably/ui/core/utils/cn';
 import { hierarchicalKey } from './utils/nav';
 
 const linkStyles =
-  'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500 focus-base transition-colors';
+  'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500 focus-base transition-colors whitespace-nowrap';
 
 const Breadcrumbs: React.FC = () => {
   const { activePage } = useLayoutContext();
@@ -35,40 +35,40 @@ const Breadcrumbs: React.FC = () => {
   })();
 
   return (
-    <nav aria-label="breadcrumb" className="flex items-center gap-1 min-w-0">
+    <nav aria-label="breadcrumb" className="flex items-center gap-1 min-w-0 flex-wrap">
       {lastActiveNodeIndex === null && (
         <Icon
-          name="icon-gui-chevron-left-micro"
-          size="16px"
+          name="icon-gui-chevron-left-solid"
+          size="12px"
           color="text-neutral-900 dark:text-neutral-400"
-          additionalCSS="sm:hidden"
+          additionalCSS="md:hidden shrink-0"
         />
       )}
-      <Link to="/docs" className={cn(linkStyles, lastActiveNodeIndex !== null && 'hidden sm:block')}>
+      <Link to="/docs" className={cn(linkStyles, lastActiveNodeIndex !== null && 'hidden md:block')}>
         Home
       </Link>
       <Icon
-        name="icon-gui-chevron-right-micro"
-        size="16px"
+        name="icon-gui-chevron-right-solid"
+        size="12px"
         color="text-neutral-900 dark:text-neutral-400"
-        additionalCSS={cn('rotate-180 sm:rotate-0', { 'hidden sm:flex': lastActiveNodeIndex === null })}
+        additionalCSS={cn('shrink-0 rotate-180 md:rotate-0', { 'hidden md:flex': lastActiveNodeIndex === null })}
       />
       {activePage.tree.map((node, index) => (
         <React.Fragment key={hierarchicalKey(node.page.link, index, activePage.tree)}>
           {index > 0 ? (
             <Icon
-              name="icon-gui-chevron-right-micro"
-              size="16px"
+              name="icon-gui-chevron-right-solid"
+              size="12px"
               color="text-neutral-900 dark:text-neutral-400"
-              additionalCSS="hidden sm:flex"
+              additionalCSS="hidden md:flex shrink-0"
             />
           ) : null}
           <Link
             to={node.page.link}
             className={cn(linkStyles, {
               'text-neutral-700 dark:text-neutral-700 pointer-events-none':
                 index === activePage.tree.length - 1 || node.page.link === '#',
-              'hidden sm:flex': index !== lastActiveNodeIndex,
+              'hidden md:flex': index !== lastActiveNodeIndex,
             })}
           >
             {node.page.name}

src/components/Layout/LanguageSelector.test.tsx

@@ -72,7 +72,7 @@ describe('LanguageSelector', () => {
 
   it('renders the LanguageSelector component with default language (JS)', () => {
     render(<LanguageSelector />);
-    expect(screen.getByText('icon-gui-chevron-down-micro')).toBeInTheDocument();
+    expect(screen.getByText('icon-gui-chevron-down-solid')).toBeInTheDocument();
     expect(screen.getByText('icon-tech-javascript')).toBeInTheDocument();
     expect(screen.getByText('JavaScript')).toBeInTheDocument();
   });

src/components/Layout/LanguageSelector.tsx

@@ -93,8 +93,8 @@ const SingleLanguageSelector = () => {
           {options.length > 1 && (
             <Select.Icon className="flex items-center pl-2 text-red-orange cursor-pointer">
               <Icon
-                name="icon-gui-chevron-down-micro"
-                size="20px"
+                name="icon-gui-chevron-down-solid"
+                size="12px"
                 additionalCSS="text-neutral-700 group-hover/lang-dropdown:text-neutral-1300 dark:text-neutral-600 dark:group-hover/lang-dropdown:text-neutral-000 transition-colors"
               />
             </Select.Icon>
@@ -248,8 +248,8 @@ const DualLanguageDropdown = ({ label, paramName, languages, selectedLanguage }:
           {options.length > 1 && (
             <Select.Icon className="flex items-center pl-2 text-red-orange cursor-pointer">
               <Icon
-                name="icon-gui-chevron-down-micro"
-                size="20px"
+                name="icon-gui-chevron-down-solid"
+                size="12px"
                 additionalCSS="text-neutral-700 group-hover/lang-dropdown:text-neutral-1300 dark:text-neutral-600 dark:group-hover/lang-dropdown:text-neutral-000 transition-colors"
               />
             </Select.Icon>