react-uswds icon indicating copy to clipboard operation
react-uswds copied to clipboard

Default Styling for this `<Breadcrumb />` Class Puts it Way Off Screen

Open greenteaisgreat opened this issue 6 months ago • 0 comments

ReactUSWDS Version & USWDS Version:

React USWDS: 9.0.0 USWDS: 2.14.0

Describe the bug

The default styling for the ".usa-breadcrumb__list-item" class (as it stands in my project) is this:

breadcrumb-styling

Would y'all know why it's defaulting to an absolute position with a left property that will never appear within the viewport?

To Reproduce the Bug

Import the <Breadcrumb /> component and its relative counterparts (<BreadcrumbBar />, etc.) and label the breadcrumb link with some text; the text will overflow far off to the left, as the absolute positioning is set to left: -999rem

Expected behavior

I would expect that styling to not be set to something that won't ever appear in the window.

Screenshots

This is how I'm implementing the breadcrumb component breadcrumb

Additional context

Here's the closest source I could find to its implementation in Trussworks' code:

https://github.com/trussworks/react-uswds/blame/9e3bea7ead5042b0cda4cd3f3d9d7bb325f87c07/src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx#L16

This could also be an issue within USWDS, as I'm sure y'all are just drawing from their styles and packaging them up into importable components. Any and all information would be greatly appreciated!

greenteaisgreat avatar Aug 03 '24 03:08 greenteaisgreat