fix(breadcrumbs): text wrap & overflow

Author: abelflopes

packages/components/base/src/breadcrumbs/Breadcrumbs.tsx

@@ -13,7 +13,7 @@ import { BreadcrumsDropdownContextProvider } from "./context/dropdown";
 /**
  * Props for configuring the Breadcrumbs component
  */
-interface BreadcrumbsProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
+interface BreadcrumbsProps extends Omit<React.ComponentPropsWithRef<"nav">, "children"> {
   /** Array of React nodes to be displayed as breadcrumb items, separated by chevron icons */
   items: React.ReactNode[];
   /** The number of items to collapse at */

packages/components/base/src/breadcrumbs/styles/index.module.scss

@@ -5,6 +5,5 @@
   align-items: center;
   gap: theme.get-spacing(0.5);
   color: theme.get-color(neutral-dark-100);
-
-  @include theme.focus;
+  white-space: nowrap;
 }

packages/components/base/src/breadcrumbs/styles/item.module.scss

@@ -4,10 +4,13 @@
 .root {
   @include text.text-base(p, soft);
 
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: theme.get-spacing(0.5);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex-shrink: 1;
+  flex-grow: 0;
+
+  @include theme.focus;
 
   &.active {
     @include text.text-skin(highlight-primary);