Fix styling issues with button

Author: pksjce

packages/react/src/Breadcrumbs/Breadcrumbs.module.css

@@ -17,37 +17,23 @@
   flex-direction: row;
 }
 
-[data-overflow='menu'] .BreadcrumbsItem {
+.BreadcrumbsItem {
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
-}
-
-.BreadcrumbsItem {
-  display: inline-block;
+  flex: 0 99999 auto;
+  min-width: auto;
   font-size: var(--text-body-size-medium);
   white-space: nowrap;
   list-style: none;
 
-  &::after {
-    display: inline-block;
-    height: 0.8em;
-    /* stylelint-disable-next-line primer/spacing */
-    margin: 0.25em 0.5em 0 0.5em;
-    font-size: var(--text-body-size-medium);
-    content: '';
-    /* stylelint-disable-next-line primer/borders, primer/colors */
-    border-right: 0.1em solid var(--fgColor-muted);
-    transform: rotate(15deg) translateY(0.0625em);
-  }
-
   &:first-child {
     margin-left: 0;
   }
 
   &:last-child {
-    &::after {
-      content: none;
+    .ItemSeparator {
+      display: none;
     }
   }
 }
@@ -75,5 +61,13 @@
 
 .MenuButton {
   color: var(--fgColor-link);
-  padding-top: 4px;
+}
+
+.ItemSeparator {
+  color: var(--fgColor-muted);
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  white-space: nowrap;
+  user-select: none;
 }

packages/react/src/Breadcrumbs/Breadcrumbs.tsx

@@ -240,18 +240,21 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
           items={effectiveMenuItems}
           aria-label={`${effectiveMenuItems.length} more breadcrumb items`}
         />
+        <ItemSeparator />
       </li>
     )
 
     const visibleElements = visibleItems.map((child, index) => (
       <li className={classes.BreadcrumbsItem} key={`visible + ${index}`}>
         {child}
+        <ItemSeparator />
       </li>
     ))
 
     const rootElement = (
       <li className={classes.BreadcrumbsItem} key={`rootElement`}>
         {rootItem}
+        <ItemSeparator />
       </li>
     )
 
@@ -279,6 +282,16 @@ function Breadcrumbs({className, children, sx: sxProp, overflow = 'wrap', hideRo
   )
 }
 
+const ItemSeparator = () => {
+  return (
+    <span className={classes.ItemSeparator}>
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M10.956 1.27994L6.06418 14.7201L5 14.7201L9.89181 1.27994L10.956 1.27994Z" fill="currentcolor" />
+      </svg>
+    </span>
+  )
+}
+
 type StyledBreadcrumbsItemProps = {
   to?: To
   selected?: boolean