Breadcrumbs are aligned too far to the left

[pauloxnet]

Describe the issue

Current Behavior

Breadcrumbs first element is aligned too far to the left.

Expected Behavior

Breadcrumbs first element correctly aligned in the left.

Disclaimer

I'm not a CSS expert but I was using the new breadcrumbs feature from the latest version of Pico.css in my static blog and I noticed this issue at low resolution in the responsive mode in Firefox.

Reproduction URL

I don't know how to produce a minimal test with CodePen.
I would link my website here but this practice has been expressly discouraged in the issue template.

Environment

• Ubuntu 22.04
• Firefox 104.0.2 64bit

Solution

I solved this issue in my blog avoiding to apply the padding rule to the breadcrumbs first li element, as below:

  &[aria-label="breadcrumb"] {
    align-items: center;
    justify-content: left;

    & ul li {
+     &:not(:first-child) {
      padding-inline-start: 0;
+     }
      &:not(:last-child) {
        a::after {
          padding-inline-start: 0.5rem;
          content: "/";
          color: var(--muted-color);
        }
      }
    }

    & a[aria-current="page"] {
      color: inherit;
    }
  }

Code link

pico/scss/components/_nav.scss

Line 71 in 867621d

& ul li {

[lucaslarroche]

Hi @pauloxnet,
Thank you. Good find.

I improved the breadcrumb. Preview here, PR here.

Feedback is welcome.

[pauloxnet]

Hi @lucaslarroche,

I am glad that my issue report was useful. Thanks for improving the breadcrumbs. The preview seems fine to me.

[lucaslarroche]

Thank you, merged in v.1.5.5