From 08c54d2c79c922eead9c84a7ae09b57e5edfbb8a Mon Sep 17 00:00:00 2001
From: "noa.santo" <noa.santo@satellytes.com>
Date: Thu, 19 Sep 2024 17:22:16 +0200
Subject: [PATCH] fix (a11y): breadcrumb focus outline now works without side
 effects

---
 src/components/layout/breadcrumb/breadcrumb.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/breadcrumb/breadcrumb.tsx b/src/components/layout/breadcrumb/breadcrumb.tsx
index b264cc2d9..8d4ba2edb 100644
--- a/src/components/layout/breadcrumb/breadcrumb.tsx
+++ b/src/components/layout/breadcrumb/breadcrumb.tsx
@@ -8,7 +8,9 @@ const BreadcrumbContainer = styled.ol`
   list-style: none;
   display: flex;
   flex-wrap: nowrap;
-  padding: 0;
+  overflow-x: clip;
+  padding-left: 4px;
+  transform: translateX(-4px);
 `;
 
 const BreadcrumbListItem = styled.li`
@@ -31,6 +33,10 @@ const BreadcrumbListItem = styled.li`
   }
 `;
 
+const BreadcrumbLink = styled(Link)`
+  display: inline-block;
+`;
+
 interface BreadcrumbProps {
   breadcrumbEntries: BreadcrumbEntry[];
 }
@@ -49,7 +55,9 @@ export const Breadcrumb = ({
         {breadcrumbEntries.map((breadcrumbEntry) => {
           return (
             <BreadcrumbListItem key={breadcrumbEntry.label}>
-              <Link to={breadcrumbEntry.pathname}>{breadcrumbEntry.label}</Link>
+              <BreadcrumbLink to={breadcrumbEntry.pathname}>
+                {breadcrumbEntry.label}
+              </BreadcrumbLink>
             </BreadcrumbListItem>
           );
         })}