Fix breadcrumb overflow by adding max-width constraint to prevent page overflow (#3540)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jonrohan <54012+jonrohan@users.noreply.github.com>
Co-authored-by: Jon Rohan <rohan@github.com>

Author: Copilot

.changeset/proud-wombats-yell.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Fix breadcrumb overflow by adding max-width constraint to prevent page overflow

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_long_items/aria-snapshot.yml

@@ -0,0 +1,8 @@
+- navigation "Breadcrumb":
+  - list:
+    - listitem:
+      - link "Home"
+    - listitem:
+      - link "This is a very long breadcrumb item that would normally cause overflow issues by being much longer than expected breadcrumb text should be"
+    - listitem:
+      - link "And another extremely long breadcrumb item name that demonstrates the max-width fix working correctly to prevent page overflow"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_long_items/default.png

@@ -3,6 +3,7 @@
   /* stylelint-disable-next-line primer/spacing */
   margin-left: -0.35em;
   list-style: none;
+  max-width: 100%;
 
   &::after {
     display: inline-block;

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/breadcrumbs/with_long_items/focused.png

@@ -47,6 +47,12 @@ def with_link_target(number_of_links: 2)
           end
         end
       end
+
+      # @label With long items (no truncation)
+      # @snapshot
+      def with_long_items
+        render_with_template
+      end
     end
   end
 end

app/components/primer/beta/breadcrumbs.pcss

@@ -0,0 +1,13 @@
+<% texts = [
+          "Home",
+          "This is a very long breadcrumb item that would normally cause overflow issues by being much longer than expected breadcrumb text should be",
+          "And another extremely long breadcrumb item name that demonstrates the max-width fix working correctly to prevent page overflow"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= text %>
+    <% end %>
+  <% end %>
+<% end %>

previews/primer/beta/breadcrumbs_preview.rb

@@ -81,4 +81,13 @@ def test_renders_target_attribute
   def test_status
     assert_component_state(Primer::Beta::Breadcrumbs, :beta)
   end
+
+  def test_breadcrumb_items_have_correct_css_class
+    render_inline(Primer::Beta::Breadcrumbs.new) do |component|
+      component.with_item(href: "/") { "Home" }
+      component.with_item(href: "/about") { "About" }
+    end
+
+    assert_selector(".breadcrumb-item", count: 2)
+  end
 end