From e364381fa51c29913aa7eee9be17bed048d9973d Mon Sep 17 00:00:00 2001
From: Leonardo <leonardo.divittorio@live.it>
Date: Wed, 11 Oct 2023 11:15:18 +0200
Subject: [PATCH] fix: enhanced breadcrumbs style (#390)

* fix: enhanced breadcrumbs style

* fix: linting error 0 unit

---------

Co-authored-by: Leonardo Di Vittorio <leonardo.divittorio@Leonardos-MacBook-Pro.local>
---
 src/components/Breadcrumbs/Breadcrumbs.tsx | 29 +++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index fc3cb5dd3..cf4db8a6b 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,5 +1,14 @@
-import React, { Children, ComponentPropsWithoutRef, ReactElement, ReactNode, cloneElement } from 'react';
+import React, {
+    Children,
+    ComponentPropsWithoutRef,
+    ReactElement,
+    ReactNode,
+    cloneElement,
+    useEffect,
+    useRef
+} from 'react';
 import styled from 'styled-components';
+import { MarginProps } from 'styled-system';
 
 import { ChevronRightIcon } from '../../icons';
 import { Text } from '../Text/Text';
@@ -17,7 +26,7 @@ interface InvertedStyle {
     inverted?: boolean;
 }
 
-interface BreadcrumbsProps extends InvertedStyle {
+interface BreadcrumbsProps extends InvertedStyle, MarginProps {
     /**
      * Content of the Breadcrumbs
      * @required
@@ -33,17 +42,31 @@ const BreadcrumbsList = styled.ul`
     padding: 0;
     list-style: none;
     display: flex;
+    overflow: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+        width: 0;
+    }
 `;
 
 const BreadcrumbsListItem = styled.li`
     display: flex;
+    text-wrap: nowrap;
 `;
 
 const Breadcrumbs = ({ children, inverted }: BreadcrumbsProps): JSX.Element => {
     const arrayChildren = Children.toArray(children);
+    const breadcrumbsListRef = useRef<HTMLUListElement | null>(null);
+
+    useEffect(() => {
+        if (breadcrumbsListRef.current) {
+            breadcrumbsListRef.current.scrollLeft = breadcrumbsListRef.current.scrollWidth;
+        }
+    }, []);
 
     return (
-        <BreadcrumbsList>
+        <BreadcrumbsList ref={breadcrumbsListRef}>
             {Children.map(arrayChildren, (child, index) => (
                 <BreadcrumbsListItem>
                     <nav aria-label="breadcrumbs">