Remove hardcoded width from Breadcrumbs

[yelyzavetakhokhlova]

Screen.Recording.2026-02-24.at.18.13.56.mov

Summary by CodeRabbit

• New Features

  • Breadcrumbs component now accepts an optional className prop for custom styling capabilities.

• Improvements

  • Breadcrumbs layout improved with flexible width implementation, replacing fixed pixel constraints for enhanced layout adaptability.
  • Enhanced Storybook preview styling configuration.

[coderabbitai]

Walkthrough

This PR updates Storybook preview styling, refactors the Breadcrumbs component to use fluid width instead of fixed width constraints, and adds an optional className prop for customizable styling.

Changes

Cohort / File(s)	Summary
Storybook Configuration .storybook/preview.css, .storybook/preview.tsx	Adds CSS rules for Storybook root styling (width: 100%, max-width: 100%) and imports the new preview CSS file into the preview configuration.
Breadcrumbs Component src/components/breadcrumbs/breadcrumbs.module.scss, src/components/breadcrumbs/breadcrumbs.tsx, src/components/breadcrumbs/types.ts	Refactors breadcrumb layout from fixed width (740px) to fluid (100%), replaces inline-flex with flex for responsive behavior, removes dynamic count-based CSS classes, and adds optional className prop to BreadcrumbsProps for custom styling support.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Add maxShownDescriptors prop to Breadcrumbs #242: Modifies the same Breadcrumbs component and its props interface with overlapping refactoring scope.

Suggested reviewers

• AmsterGet
• allaprischepa
• maria-hambardzumian
• siarheirazuvalau
• viktor-soroka-epam

Poem

🐰 Breadcrumbs now stretch from left to right,
No fixed widths holding back their flight,
With className props, we paint with care,
Fluid layouts floating everywhere!
Storybook CSS joins the party cheer, ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly summarizes the main change: removing hardcoded width constraints from the Breadcrumbs component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/breadcrumbs-max-descriptors

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/breadcrumbs/breadcrumbs.module.scss`:
- Line 22: The Stylelint rule flags the argumentless mixin call `@include`
font-scale() — remove the empty parentheses so the mixin call is argumentless
(replace occurrences of `@include` font-scale() with `@include` font-scale) in the
breadcrumbs.module.scss where the mixin is used to satisfy
scss/at-mixin-argumentless-call-parentheses.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between dff2f00 and def349f.

📒 Files selected for processing (5)

• .storybook/preview.css
• .storybook/preview.tsx
• src/components/breadcrumbs/breadcrumbs.module.scss
• src/components/breadcrumbs/breadcrumbs.tsx
• src/components/breadcrumbs/types.ts